Main Nav dropdown disappearing behind main news slider WordPress
- SOLVED
My main navigation dropdown is disappearing behind my news image slider when the slides transition. How do I fix this? http://www.scoopituplax.com
Answers (4)
Ivaylo Draganov answers:
Hi,
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:
Hi
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
(http://scoopituptournament.com/development/wp-content/plugins/dropdown-menu-widget/css/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
http://scoopituptournament.com/development/wp-content/themes/MediapressWP/css/nivo-slider.css