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;}
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?
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.:
http://entrustpr.com/blog/perspectives-2/oklahoma-city-bombing-chaos-and-control/
Thanks for your help.
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;
}
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?
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>
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.
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); ?>
</div>
this is my page. http://www.noordinstreethouse.com/
Please help me to rectify the issue.
regards,
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.
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
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.
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: 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?
