WordPress.org

Ready to get started?Download WordPress

Forums

WOW Slider
[resolved] Drop-down menus hidden by Wow Slider (17 posts)

  1. freyaluna
    Member
    Posted 1 year ago #

    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 - http://www.love-yourself-naturally.com

    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,
    Sami

    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.

    http://wordpress.org/extend/plugins/wowslider/

  2. WOWSlider.com
    Member
    Plugin Author

    Posted 1 year ago #

    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:
    http://www.love-yourself-naturally.com/wp-content/uploads/weaver-subthemes/style-weaver.css?ver=345
    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;}

  3. mitch1957
    Member
    Posted 1 year ago #

    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 http://www.entrustpr.com/blog

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

  4. WOWSlider.com
    Member
    Plugin Author

    Posted 1 year ago #

    There is no WOWSlider on your page.

  5. mitch1957
    Member
    Posted 1 year ago #

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

    http://entrustpr.com/blog/perspectives-2/oklahoma-city-bombing-chaos-and-control/

    Thanks for your help.

  6. WOWSlider.com
    Member
    Plugin Author

    Posted 1 year ago #

    The same z-index problem. You should open "style.css" file:
    http://entrustpr.com/blog/wp-content/themes/twentytwelve/style.css
    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;
            position:relative;
            z-index:100;
    }
  7. mitch1957
    Member
    Posted 1 year ago #

    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:

    http://entrustpr.com/blog/video-log/21-second-stress-relief/

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

    any thoughts?

  8. WOWSlider.com
    Member
    Plugin Author

    Posted 1 year ago #

    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="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="src" value="http://www.youtube.com/v/v1nsu65ghuE?hl=en_US&version=3&rel=0" />
    <param name="allowfullscreen" value="true" />
    <param name="wmode" value="opaque">
    <embed width="853" height="480" wmode="opaque" type="application/x-shockwave-flash" src="http://www.youtube.com/v/v1nsu65ghuE?hl=en_US&version=3&rel=0" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />
    </object>
  9. mitch1957
    Member
    Posted 1 year ago #

    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.

  10. WOWSlider.com
    Member
    Plugin Author

    Posted 1 year ago #

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

  11. Akeepen
    Member
    Posted 9 months ago #

    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); ?>
    </div>

    this is my page. http://www.noordinstreethouse.com/

    Please help me to rectify the issue.
    regards,

  12. WOWSlider.com
    Member
    Plugin Author

    Posted 9 months ago #

    Akeepen,

    You should increase z-index value of your menu. Open "style.css" file:
    http://www.noordinstreethouse.com/wp-content/themes/andrina-lite/style.css

    in any text editor, find the following lines:

    #menu {
        position:relative;
        z-index:51;
    }

    z-index value should be more than 90.

  13. sokoloidis
    Member
    Posted 7 months ago #

    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): http://www.sportape.ru/
    Many Thanks,
    Alex

  14. WOWSlider.com
    Member
    Plugin Author

    Posted 7 months ago #

    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:
    http://www.sportape.ru/wp-content/themes/graphene/style.css

    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;
    	z-index:100;
    }

    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.

  15. sokoloidis
    Member
    Posted 7 months ago #

    Thank you very much for your help!

  16. Andar7
    Member
    Posted 6 months ago #

    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: http://andar7.com/blog/

    /* 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?

  17. WOWSlider.com
    Member
    Plugin Author

    Posted 6 months ago #

    I have just checked your page. Slider and menu are not our products. We support products of our company only. Please contact with developers of your products.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.