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

Main Nav dropdown disappearing behind main news slider WordPress


My main navigation dropdown is disappearing behind my news image slider when the slides transition. How do I fix this?

Answers (4)


Ivaylo Draganov answers:


it's a CSS z-index issue. Try placing these rules in your style.css:

#wrapper {
position: relative;
z-index: 999;
#header-wrap {
z-index: 9999;
position: relative;

Ivaylo Draganov comments:

Yes, Kailey is right, this would also work:

#main-nav-wrapper {
z-index: 61;

It's somewhere around line 239 in <em>style.css</em> and it's currently set at <em>z-index: 10</em>.


Kailey Lampert answers:

I'd change #main-nav-wrapper's z-index to 61, just above the slider's z-index.


RNWest answers:


Try setting z-index:1; ..your style.css and about line 458 see below

#slider { height: 336px; z-index: 1;}

Good luck


derekshirk answers:

You will need to edit your CSS:

You're Nivo slider has the following attributes associated with it:

#slider .nivo-controlNav {
background: url("img/slider-nav-bg.png") repeat scroll 0 0 transparent;
bottom: 56px;
padding: 20px 0 14px 20px;
position: absolute;
width: 589px;
z-index: 9999;

You have a css file inside of your plugin folder / dropdown-menu-widget / shailan-dropdown.css


This file looks like the Z-index is lower than the nivo slider ( #slider .nivo-controlNav )

/* Z-index */
ul.dropdown, ul.dropdown li, ul.dropdown ul li, ul.dropdown li.hover, ul.dropdown li:hover { position: relative; }
ul.dropdown li { /*z-index: 598;*/ }
ul.dropdown ul { position:absolute; z-index: 597; }
ul.dropdown ul li { z-index: 598; }

Make sure the z-index for the drop down is a higher value than the z-index for the nivo settings