Layering issue in WordPress menu item

HTML & CSS
1

Here’s my site: http://greenpointroofing.com. It’s built using a child theme with my own style.css sheet.

Here’s my problem (present in all browsers on all platforms on which I’ve tested): See that menu item named “Projects”? See how when you rollover that item on the homepage, the sub-menu ul named .sf-menu ul appears UNDER the entry-content div containing the photo slideshow (named #bwg_container1_0)? Aaaargh! Please help me raise up the menu, send the slideshow container div back, whatever I need to do to fix this.

Please note that that sideshow is created with a plugin that adds all sorts of styling at the element level so … a solution may require an !important declaration or two (because I’d like to limit overrides to my style.css document versus fiddling with templates and/or javascript).

Any help you could provide would be greatly appreciated. Thanks in advance for your attention to this issue.

2

Hi, PitaMaria. Welcome to the forums. Looks like you’ve been a member for along time, but this is your first post in a forum that counts posts. :slight_smile:

Using Firebug, I added {z-index:1} as shown below and it positions the slider behind the menu (z-index: “0” or “1” will work).

http://greenpointroofing.com/ (line 117)


#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_container_0 {
    display: table;
    height: 345px;
    position: absolute;
    text-align: center;
    top: 0;
    vertical-align: middle;
    width: 935px;
    [color=blue]z-index:1;  /* add this */[/color]
}

Hope this helps :slight_smile:

3

@ronpat: This did the trick. I can’t thank you enough.

Using Firebug, I added {z-index:1} as shown below and it positions the slider behind the menu (z-index: “0” or “1” will work).


#bwg_container1_0, #bwg_container2_0, .bwg_slideshow_image_container_0 {
    z-index:1;  /* add this */
}

Hope this helps :slight_smile:

4

You’re very welcome. Thanks for the feedback.