Navigation going behind slider below WordPress
- SOLVED
On this page, www.phoenixrecycling.ca, the top menu in the black band at the top goes behind the slider when it hovers - in IE7 only of course - what do I need to change to fix this?
j
Answers (5)
West Coast Design Co. answers:
Hey Jill,
Checkout z index,
<strong>z-index: 99999</strong>;
Hope that helps!
EDIT: possibly increase "#nav li ul" z-index: 20000; to higher a number.
PS I cannot reproduce your issues on my Mac, PC and every version of IE.
Pippin Williamson answers:
The only element that needs a z-index of 9999 is the div wrapping the ul.navigation.
IE has a bug that causes this to happen.
Your z-index's need to be set as follows:
ul.navigation {
z-index: 999;
}
.topnavbarright {
z-index: 9999;
}
That should fix it. You just have to ensure that you set both, with the topnavbarright as something like 9999.
Jill Chongva comments:
I've used this code and the client says that it's going in front of the slide show, but BEHIND the red menu now.
Help!
j
Pippin Williamson comments:
Set div#navbar to
<code>
#navbar {
position: relative;
z-index: 800;
}
Jill Chongva comments:
Problem - client says that in IE 7 the top menu in the black bar is still going behind the menu in the red bar.
Help!
Jill Chongva comments:
Didn't work and now it's going behind the red menu in IE 8
What should I try next?
Jill Chongva comments:
Yes, it's still happening in IE7 (client is travelling so limited internet access)
j
Jill Chongva comments:
Yes, Pippin, that would be great. Email me at [email protected]
Mike Truese answers:
the #nav (menu holder) has to have a higher z-index than the slider.
BUT, if you are using any sort of 'lightbox' or clone thereof, the menu should be z-indexed lower than the lightbox (otherwise the menu shows on top of lightbox)
So, find the balance and set them via CSS.
Roberto Mas answers:
add this in the css for
ul.navigation
position: relative;
z-index: 9999;
ul.navigation {
float:right;
height:32px;
list-style:none outside none;
margin:0;
padding:0;
position:relative;
text-align:left;
z-index:9999;
}
and then add this for #nav
#nav {
margin:0;
padding:0;
position:relative;
z-index:9998;
}
flashingcursor answers:
Looks like you're setting z-index : 8000 on .ie-nav-wrapper which is being applied to both menus. I believe this will cause the second one to show up "higher" than the first one.
Best way:
1) Remove the z-index on the ie-nav-wrapper class.
2) Make sure each menu is getting a unique ID. (ie: #nav-one #nav-two)
3) Add CSS:
#nav-one { z-index: 99999; }
#nav-two { z-index: 99998; }