How to move hamburger menu to the front of overlay menu


Tags: javascript,jquery,html,css,sass

Problem :

How can I move the hamburger menu in front of overlay menu whilst holding its position from mobile through to desktop? Here is an example on codepen

Here is my code below

HTML

<nav>            
      <button class="hamburger hamburger--squeeze" type="button">
        <span class="hamburger-box"> 
         <span class="hamburger-inner"></span>
        </span>
      </button>

     <div class="overlay">
        some list elements go here
     </div>
</nav>

CSS

.overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: transparentize($darkest-grey,0.01);
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 100px;

li{
    list-style: none;
  }
}

.is-active{
    display: block;
}

JavaScript

 <script>
      var hamburger = document.querySelector(".hamburger");
      var overlayMenu = document.querySelector(".overlay");
      hamburger.addEventListener("click", function() {
        hamburger.classList.toggle("is-active");
        overlayMenu.classList.toggle("is-active");
      });
 </script>

Also I'm using Bourbon neat and Hamburgers. If theres a more elegant way of doing this then please let me know :) Thanks!



Solution :

You need a higher z-index for the hamb.

Remember z-index works just for positioned elements, you need to change the default static position of the button.

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.3);
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 100px;
}

.is-active {
  display: block;
  position:relative;
  z-index:100;
}
<nav>
  <button class="hamburger hamburger--squeeze is-active" type="button">
    <span class="hamburger-box"> 
         <span class="hamburger-inner">button</span>
    </span>
  </button>

  <div class="overlay">
    some list elements go here
  </div>
</nav>


    CSS Howto..

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How to positioning the tooltip above cursor

    How to apply custom CSS to Angular Material md-contact-chips

    How to create a skin for mediaelement.js?

    How to align radio buttons with labels in one line? [duplicate]

    how to change html content text

    using css

    How to get dimensions for a background image when background-size is set to contain?

    How to pre-load images only using CSS (no JS)?

    How to hide last divider in list of comments using CSS?

    How to tell if text is overflowing in a table cell in Firefox?

    how to get a CSSStyleSheet object from a