Tom Tom - 1 month ago 10
CSS Question

z-index and burger menu



body {
background-color: #313449;
font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
z-index: 1;
}
/* Hidden Checkbox */
#menu-toggle input {
opacity: 0;
width: 40px;
height: 40px;
z-index: 2;
/* checkbox on top */
position: absolute;
top: 0;
left: 0;
}
#menu-toggle input:checked {
transition: all 0.3s ease;
}
/* Hamburger */
#menu-toggle span {
display: block;
width: 30px;
border: #ffffff 2px solid;
margin-top: 5px;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: 0 0;
}
#menu-toggle input:checked ~ span {
/* all bars - top bar */
transform: rotate(45deg) translate(-1px, -3px);
border-color: #000000;
}
#menu-toggle input:checked ~ span:nth-child(3) {
/* middle bar */
transform: scale(0, 0);
opacity: 0;
}
#menu-toggle input ~ span:nth-child(4) {
/* bottom bar */
transform-origin: 0 100%;
}
#menu-toggle input:checked ~ span:nth-child(4) {
transform: rotate(-45deg) translate(0, 2px);
}
/* Menu Content */
#menu-toggle input:checked ~ #menu {
/* display menu */
left: 0;
}
#menu-toggle #menu {
background-color: grey;
background-color: rgba(255, 255, 255, 1);
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu-toggle li {
list-style: none;
margin: 30px 0;
}
#menu-toggle a li {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
#menu-toggle a li:hover {
color: red;
transition: color 0.3s ease;
}

<nav role="navigation">
<div id="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>

<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li>Sign in</li>
</a>
</ul>
</div>
</nav>

<section>
<h1>Title</h1>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
<br />
<br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
<br />
<br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
<br />
<br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
</p>
</section>





Hi,

I am struggling with my burger menu. It is hidden under my #menu div and I cannot find why. I tried z-index to my spans but it is not working.

What am I doing wrong here?

I also cannot understand why my 2 span and my third span are nth-child(3) and (4)? It is working like this but I cannot figure out why it's not (2) and (3).

Thanks;

GvM GvM
Answer

add position:relative and z-index:1 to your span.

body {
  background-color: #313449;
  font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
  z-index: 1;
  }
  /* Hidden Checkbox */
  #menu-toggle input {
    opacity: 0;
    width: 40px;
    height: 40px;
    z-index: 2;
    /* checkbox on top */
    position: absolute;
    top: 0;
    left: 0;
  }
  #menu-toggle input:checked {
    transition: all 0.3s ease;
  }
  /* Hamburger */
  #menu-toggle span {
    display: block;
    width: 30px;
    border: #ffffff 2px solid;
    margin-top: 5px;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: 0 0;
    position:relative;
    z-index:1;
  }
  #menu-toggle input:checked ~ span {
    /* all bars - top bar */
    transform: rotate(45deg) translate(-1px, -3px);
    border-color: #000000;
  }
  #menu-toggle input:checked ~ span:nth-child(3) {
    /* middle bar */
    transform: scale(0, 0);
    opacity: 0;
  }
  #menu-toggle input ~ span:nth-child(4) {
    /* bottom bar */
    transform-origin: 0 100%;
  }
  #menu-toggle input:checked ~ span:nth-child(4) {
    transform: rotate(-45deg) translate(0, 2px);
  }
  /* Menu Content */
  #menu-toggle input:checked ~ #menu {
    /* display menu */
    left: 0;
  }
  #menu-toggle #menu {
    background-color: grey;
    background-color: rgba(255, 255, 255, 1);
    width: 100px;
    height: auto;
    padding: 30px 30px;
    text-align: center;
    position: absolute;
    top: 0;
    left: -160px;
    margin-top: 0;
    transition: all 0.3s ease;
  }
  #menu-toggle li {
    list-style: none;
    margin: 30px 0;
  }
  #menu-toggle a li {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  #menu-toggle a li:hover {
    color: red;
    transition: color 0.3s ease;
  }
<nav role="navigation">
  <div id="menu-toggle">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>

    <ul id="menu">
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Contact</li>
      </a>
      <a href="#">
        <li>Sign in</li>
      </a>
    </ul>
  </div>
</nav>

<section>
  <h1>Title</h1>
  <p>
    Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
    <br />
    <br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
    <br />
    <br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
    <br />
    <br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
  </p>
</section>