Z-index not taking effect

Question

I designed a mobile menu and I have applied a z-index to the drop down mobile menu, but other elements still show over it. I have tried putting the z-index in these two elements:

.nav_list {}
.nav_list > a {}

Please note you have to be under 640px to see the button. Then when you press it, you will see the word "Hello" appear over the menu.

What am I doing wrong?

$('span.nav-btn').click(function () {
  $('ul.nav_list').slideToggle(500);
 })
 $(window).resize(function (){
  if ( $(window).width() > 640 ) {
   $('ul.nav_list').removeAttr('style');
  }
 });

body {
  padding: 0;
  margin: 0;
  max-width: 100%;
    background: green;
 }
.header {
  margin: 0;
  background-color: #333;
  height: 80px;
}

.header_wrap {
  /*margin: 0 15%;*/
  width: 960px;
  text-align: center;
}
.nav-btn {
  display: none;
}
.nav_list {
  text-decoration: none;
  background-color: #333;
  color: #FFF;
  margin: 0;
  list-style: none;
  width: 100%;
}

.nav_list > a {
  display: inline-block;
  padding: 25px 12px;
  text-decoration: none;
}

.nav_list > a > li {
  text-decoration: none;
  font-size: 1em;
  color: #FFF;
}


@media screen and (max-width:640px) {
  body {
   background: blue;
  }
  .header_wrap {
   margin: 0%;
      width: 100%;
  }
  .nav_list {
   padding: 0;
   text-align: center;
   display: none;
   margin-top: 60px;
   width: 100%;
  }
  .nav_list > a {
   display: block;
   border-bottom: 1px solid #FFF;
   width: auto;
  }
  .nav-btn {
   display: block;
   background-color: #333;
   color: #FFF;
   font-size: 1.5em;
   /*text-align: right;*/
   cursor: pointer;
   padding-top: 20px;
  }
  .nav-btn:before {
   background-image: url('http://optimumwebdesigns.com/icons/mobile_menu_white.png');
   background-size: 28px 28px;
   background-repeat: no-repeat;
   width: 28px;
   height: 28px;
   content:"";
   display: block;
   float: right;
  }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
  <div class="header_wrap">
  <span class="nav-btn"></span>
    <ul class="nav_list">
      <a href="index.html"><li>Home</li></a>
      <a href="Spray-Foam-Insulation-Material-Suppliers.html"><li>Spray Foam Insulation</li></a>
      <a href="Portable-Spray-Foam-Kits.html"><li>Portable Spray Foam Kits</li></a>
      <a href="Polyurea.html"><li>Polyurea</li></a>
      <a href="Personal-protective-equipment.html"><li>Personal Protective Equipment</li></a>
      <a href="Spray-Foam-Equipment-Financing.html"><li>Financing</li></a>
      <a href="Contact-us.html"><li>Contact us</li></a>
    </ul>
 </div>
</header>
<p>
Hello
</p>

I could not reproduce the issue here, but at first sight it seems to me that you forgot to change your positioning to something non-static. Try position: relative on the mentioned elements. — rcpinto, Mar 21 '16 at 18:35

score 4 · Accepted Answer · answered Mar 21 '16 at 18:35

4

You need to add the position property to your elements for z index to work

so for instance adding position: relative; to .nav-list then adding your z-index should show the element above the others.

answered Mar 21 '16 at 18:35

gwar9

1,082
1
11
28

score 3 · Answer 2 · answered Mar 21 '16 at 18:35

3

Add a position:absolute; or position:relative; to .nav_list {}. Otherwise, z-index won't work.

answered Mar 21 '16 at 18:35

DarkQuäääse

71
4

Z-index not taking effect

2 Answers2