Anirudh Srivastav Anirudh Srivastav - 7 months ago 17
Javascript Question

jQuery Content slider blocks responsive menu drawer

The content slider blocks the menu items of my responsive site

I have used the following css to accomplish this



/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}

#sliderFrame
{
width:920px;
margin:0 auto; /*center-aligned*/
padding:20px;
box-shadow: 0 0 5px #BBB;
border:1px solid #CCC;
background-color:#FFF;
}

#slider, #slider .sliderInner {
width:680px;height:306px;/* Must be the same size as the slider images */
border-radius:0px;
}

#slider {
background-color:white;
float:left;
position:relative;
transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
position:absolute;
width:400px;
height:auto;
padding:10px 0;/* 10px will increase height.*/
left:120px;
bottom:10px;
overflow:hidden;
font:bold 13px/16px Arial;
color:#069;
text-align:center;
background:rgba(255,255,255,0.2);
border:1px solid rgba(255,255,255,0.3);
border-radius: 5px;
}
#slider .mc-caption a {
color:#060;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
display:none;
}

/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}

#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}



/* -- thumbnails -- */
#thumbs
{
float:left;
margin-left:10px;
width:230px;
font:normal 11px/13px Arial;
border-top:1px solid #CCC;
color:#666;
}
#thumbs .thumb
{
border:1px solid #CCC;
border-top:1px solid #FFF;
padding:11px 8px;
background:#EEE;
cursor:pointer;
}
#thumbs .thumb-on
{
background:#FFF;
}

#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}

#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}





And the following html for the slider



<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
<div id="slider">
<img src="img/3.jpg" alt="Caption for slide 1" />
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
<a href="http://www.menucool.com"><img src="slide-3.jpg" alt="Header File" /></a>
<img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
<img src="img/3.jpg" alt="Caption for slide 4"/>
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
</div>
</div>





here is the html for the menu drawer



<header role="banner">
<div id="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="logo" onClick="#"></a></div>
<nav class="main-nav">
<ul><!-- insert more links here -->
<li><a class="cd-signin" href="#0">Sign in</a></li>
<li><a class="cd-signup" href="#0">Sign up</a></li>
</ul>
</nav>
</header>




and its corresponding CSS



/* --------------------------------

Main components

-------------------------------- */
header[role=banner] {
position: relative;
height: 50px;
background: #343642;
}
header[role=banner] #cd-logo {
float: left;
margin: 4px 0 0 5%;
/* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
header[role=banner] #cd-logo img {
display: block;
}
header[role=banner]::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
@media only screen and (min-width: 768px) {
header[role=banner] {
height: 80px;
}
header[role=banner] #cd-logo {
margin: 20px 0 0 5%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
z-index:inherit;
}
}

.main-nav {
float: right;
margin-right: 5%;
width: 44px;
height: 100%;
background: url("../img/cd-icon-menu.svg") no-repeat center center;
cursor: pointer;
}
.main-nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.main-nav ul.is-visible {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.main-nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
background: #292a34;
border-top: 1px solid #3b3d4b;
color: #FFF;
}
@media only screen and (min-width: 768px) {
.main-nav {
width: auto;
height: auto;
background: none;
cursor: auto;
}
.main-nav ul {
position: static;
width: auto;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
line-height: 80px;
}
.main-nav ul.is-visible {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.main-nav li {
display: inline-block;
margin-left: 1em;
}
.main-nav li:nth-last-child(2) {
margin-left: 2em;
}
.main-nav a {
display: inline-block;
height: auto;
line-height: normal;
background: transparent;
}
.main-nav a.cd-signin, .main-nav a.cd-signup {
padding: .6em 1em;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50em;
}
.main-nav a.cd-signup {
background: #2f889a;
border: none;
}
}





Can Anyone help me???

Answer

The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value:

.header {
  ...
  z-index: 10;
}

For more information on stacking context there is an excellent article on mdn.