Support » Plugin: WOW Slider » Drop-down menus hidden by Wow Slider

  • Resolved freyaluna


    I installed the Wow Slider plugin a few days ago and love it. The only problem I’m having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider. You can see what I mean here –

    Does anyone have any ideas how I can rectify this? Please be as un-technical as possible, or explain really well, as I’m not at all technically-minded and don’t understand much about code, etc.

    Thanks in advance,

    P.S. I’ve read the other topic about this problem, but didn’t understand what the resolution was. It seemed to go a bit off-topic.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author


    I have just checked your page. It’s “z-index” problem. Please add “position:relative;z-index:100;” to your “header” DIV container. To do it open “style-weaver.css” file:
    in any text editor (for example, Notepad), find the following line:
    #header {padding-top: 10px;}
    You should have:
    #header {padding-top: 10px;position:relative;z-index:100;}

    I can’t figure this out on my twenty twelve theme of WP. I’m using Jetpack for Custom CSS. I currently have two codes in the Custom CSS:

    img.header-image {
    box-shadow: none;

    #header {
    padding-top: 10px;
    position: relative;
    z-index: 100;

    The top code gets rid of the grey line on my header image – so good there, but the second one doesn’t work – drop down menu still hides behind WOW Slider image on pages.

    I tried higher z-index numbers, lower z-index numbers and still nothing seems to work.

    I admit, I don’t know anything about CSS coding and for twenty twelve them, I may have the wrong code (per above).

    my site is

    Can you, in step by step, simple English, help me?

    Plugin Author


    There is no WOWSlider on your page.

    I’m sorry, I gave you the main page. Actually the WOW slider is used on other pages – i.e.:

    Thanks for your help.

    Plugin Author


    The same z-index problem. You should open “style.css” file:
    in any text editor, find the following lines:

    .main-navigation {
    	margin-top: 24px;
    	margin-top: 1.714285714rem;
    	text-align: center;

    and add “position:relative;” and “z-index:100;”. You’ll have:

    .main-navigation {
    	margin-top: 24px;
    	margin-top: 1.714285714rem;
    	text-align: center;

    BINGO!!!!!!!!!!!!!!! Works great for WOW slider problem

    Believe this or not, it worked for the WOW slider but menu drop down still hides behind YouTube video embed link – i.e:

    I tried running z-value up to 5500 and still nogo for video embed.

    any thoughts?

    Plugin Author


    You can try to add the following parameters for flash objects:
    <PARAM NAME=wmode VALUE=opaque> and WMODE="opaque" for <EMBED>.

    For example:

    <object width="853" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=",0,40,0">
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="src" value="" />
    <param name="allowfullscreen" value="true" />
    <param name="wmode" value="opaque">
    <embed width="853" height="480" wmode="opaque" type="application/x-shockwave-flash" src="" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />

    I pasted the above example script into my jetpack Custom CSS and when I went to save the change, it disappeared off the Custom CSS sheet.

    Maybe I need more detailed explanation how to copy and paste the above script.

    Plugin Author


    We support WOWSlider only. We don’t provide instruction to fix problems with other plugins.

    Hi, can anyone please help me on how make drop-down menu appear in front of wowslider ? I hover over the top navigation menu, the drop-down menu items are hidden behind the slider. Please help.

    *For your info, I’m using Andrina Lite template free version and I delete the coding for the header since it don’t provide slideshow. I replace it with these codes and I got the slideshow for my page.

    <?php get_header(); ?>
    <div class=”wowslider”>
    <?php wowslider(23); ?>

    this is my page.

    Please help me to rectify the issue.

    Plugin Author



    You should increase z-index value of your menu. Open “style.css” file:

    in any text editor, find the following lines:

    #menu {

    z-index value should be more than 90.

    Dear WOW slider support Team, I have been enjoying WOW slider for quite a while and even managed to solve z-index problem before. However this time I badly need your help as I could not figure out what code should I adjust to solve z-index problem for the title page of my web-page (menu hides behind WOW slider):
    Many Thanks,

    Plugin Author


    Alex, I have just checked your page. Z-index value of your slider is 100, so z-index value of your menu should be more than 100.

    You should open “style.css” file:

    in any text editor, find the following lines:

    /* Top level header menu, default state */
    #header-menu-wrap {
    	background: url(images/sprite_h.png) left -4px repeat-x #101010;
    	position: relative;

    and increase the value of “z-index” parameter.

    Also, I found that WOWSlider “jumps” during the transition. To fix this problem please find the following lines (in the same style.css file):

    .entry-content img,
    .child-page img {
    	border: 4px solid #e3e3e3;
    	margin: 5px 0;

    Line “margin: 5px 0;” causes this problem.



    Thank you very much for your help!



    Hi! I’m having the same problem on mobiles and when the browser is smaller. I’ve tried editing the style.css
    (Hiero: Stylesheet) as proposed in this topic but it continues overlapping it.
    I’ve tried with other sliders and it happens with all of them.
    The slider is inside a shortcode but it seem to be ok:

    /*** Shortcodes Ultimate - galleries elements ***/
    .su-slider {
    	position: relative;
    	margin-bottom: 1.5em;
    	overflow: hidden;
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	-ms-backface-visibility: hidden;
    	-o-backface-visibility: hidden;
    	backface-visibility: hidden;
    	z-index: 1;

    Maybe is the loading order?
    The site is:

    /* MENU
    ----------------------------------------------- */
    .sf-menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    .sf-menu li ul {
    	top: -999em;
    	position: relative;
    	z-index: 99999 !important;

    The only thing I changed was the position (was absolute) and added the !important command after 99999 (it is Hiero’s theme default z-index)
    Could anybody help?

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Drop-down menus hidden by Wow Slider’ is closed to new replies.