Slider hides drop down menu

Thanks a lot, you will find the urls in Pastebin here.

You might wanna have a look to what Platform theme’s guys and i have previously discussed here (namely posts 11, 17, and 18)?

Hope you’ll be able to find a way out.

Perfect! After looking at the links you gave the Platform theme guys, I see that this theme actually uses z-index quite often. The culprit is actually the #header .outline z-index, which was set to 28 and wraps all of the header and navigation. So no matter what z-index you use for the menu or sub-menu, unless you move the slider down below 27 or the header outline above 99, it wouldn’t work.

Also, just for clarification, Rob was incorrect in saying, “You’re making the z-index number higher, which sends things further back. Lower the number to bring things forward…” You were correct, “the lower z-index is, the further back the element will show.”

I’m surprised these guys do not know their own code that well and couldn’t figure it out. It took me just a few minutes. Here is the code that should fix this:

#header .outline {
    z-index: 101;
}

Also, if you want to remove the fade transition, which shows the background text through the sub-menu for a split second, there is a line in the header.php, in the head of the html, that looks like this:

jQuery('ul.sf-menu').superfish({ delay: 100, speed: 'fast', autoArrows:  1, dropShadows: 0 });

…change it to include an animation setting like this:

jQuery('ul.sf-menu').superfish({ delay: 100, speed: 'fast', animation: { height:'show' }, autoArrows:  1, dropShadows: 0 });

Aha, you are a master, thank you so much!

I found this in style.css:

/* @ #header */
	#header .outline{
		position: relative;
		zoom: 1;
		z-index:101; /* ie drop-down fix */

So i just set z-index to 101 and that is all, it works the way it did before, thanks a lot!

You are also right about the slider titles visible through submenu’s background, i never really noticed it. I found the line you say in themes/platform/sections/nav/section.nav.php and added the line you provided (just added “animation: { height:’show’ },” in the middle indeed) but there was no change.

Anyway, i’m in an excellent mood now since the menu vs slider issue is solved, you did a good action today, thanks a lot!

Happy to help!

The split-second transition is gone for me, looks perfect! Tried it in the latest version of Chrome and in IE9. Older browsers may be different. I’m not familiar with superfish and it’s height setting, there may be another option that works. I stumbled on to that setting when I did a quick search on superfish menus.

Ok, i’m not really annoyed by that transparency, and i also need to change my computer… so i’ll give it a try later.

Thanks again!!!

Hey guys,

I’m having the same issue w/ the promotion slider suddenly going in front of my drop down menu. But, I’m not using the same theme as discussed here. I’m using Wufoo. I went into my custom.css but I don’t see the code discussed here. My web site is Life Community Church. Any suggestions? Thanks very much!

@kpahl11: Your theme sets .menu styles around line 101. It sets the z-index to 50. Change that to 101.

The original line:

.menu { position: relative; list-style: none; z-index: 50; }

The changed line:

.menu { position: relative; list-style: none; z-index: 101; }

Awesome! Thank you so much for your help!

No problem at all, I’m happy that I could help!

@web2guru i am having the same prob.. dropdown menu not showing in the menu tab…. actually i am using a template … it has simple menu but i want to add dropdown list in one of its tab … and thts nt happeing.. i hav tried hard bt in vain.. i hav also checked the z-index but it wont wrk either… ??

@harrykhan
It could be a number of things. You say it has a simple menu, could it be that that template does not support drop-down sub-menus? Otherwise, it could be the z-index on one of the other div wrappers, or it could be something else entirely different. Start a new topic and post the site address so we can check it out.

@all
THIS TOPIC IS SPECIFICALLY FOR ISSUES WHERE THE “SLIDER HIDES DROP-DOWN MENU”. IF THIS IS NOT THE PROBLEM YOU HAVE, PLEASE START A NEW TOPIC! No offence intended, but it can be confusing to others when we post back and forth on unrelated issues.

I’m having this exact problem as well– the Promotion Slider hiding a drop down menu– and I have the Calotropis theme. I’m having trouble finding where to change that z-index in my theme’s code.

The website I’m working on is: https://www.fordlibrary.org

I would appreciate any help you could give!

@rachelsstorm
Hi Rachel, the element your looking for is the #menu element.

A little ways down in your stylesheet, look for this:

/* Menu */
#menu {clear: both;font-size: 1.4em;font-weight: bold;z-index: 1;position:relative;width:100%;}

Change the z-index to 2 or 99, like this:

/* Menu */
#menu {clear: both;font-size: 1.4em;font-weight: bold;z-index: 99;position:relative;width:100%;}

When I go to style.css in my Editor, this is all I see (aside from the theme description):

/* WP requirements */
.highlight {font-weight: bold;}
.clear {margin: 0;padding: 0;clear: both;}
.alignleft {float: left;margin: 5px 10px 5px 0;}
.alignright {float: right;margin: 5px 0 5px 10px;}
.aligncenter, div.aligncenter {margin: 10px auto;text-align: center;display: block;}
img.alignleft {float: left;margin: 5px 10px 5px 0;}
img.alignright {float: right;margin: 5px 0 5px 10px;}
img.aligncenter {margin: 10px auto;text-align: center;display: block;}
.wp-caption {border-width: 1px;border-style: solid;text-align: center;padding-top: 4px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
.wp-caption img {margin: 0;padding: 0;border: none;}

Unless I’m looking in the wrong place?

My error, those styles are loaded dynamically and are not part of the styles.css.

Add this to the end of the styles.css:

#menu {z-index: 99 !important;}