Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)

2010-08-08

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.

2010-08-08

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]

2010-08-08

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.

2010-08-08

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;
}

2010-08-08

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; }