Making the menu icon clickable from a curtain menu

Question

I have the starting components of a website header and curtain menu set up and working as intended. However, after clicking the menu button to bring down the curtain menu, I cannot seem to get the menu button to show up / be clickable from the curtain menu.

https://codepen.io/jnbull/pen/EerxEg

 function menuButton(x) { x.classList.toggle("change"); } function toggleNav() { var x = document.getElementById("myNav"); if (x.style.height === "100%") { x.style.height = "0%"; } else { x.style.height = "100%"; } } 

 /* Global */ .white { color: #fff } html, body { margin: 0; padding: 0; background-color: darkgray; } /* Header */ header { width: 100%; min-height: 80px; padding: 0; background-color: whitesmoke; color: black; position: fixed; margin: 0px; border-bottom: 5px solid black; } .container { width: 80%; margin: auto; overflow: hidden; } header .logo { float: left; margin-top: 4px; } header .menu { float: right; margin-top: 25px; cursor: pointer; position: relative; z-index: 2; } header .title h1 { margin: 21.5px 0px 0px 0px; padding: 0; text-align: center; font-family: 'Raleway', serif; font-size: 30px; } header .title a:link, a:visited { color: black; text-decoration: none; } .bar1, .bar2, .bar3 { background-color: black; width: 35px; height: 5px; margin-bottom: 6px; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); background-color: whitesmoke; } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); background-color: whitesmoke; } /* Navigation */ .overlay { width: 100%; height: 0; position: fixed; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.9); z-index: 1; transition: 0.5s; overflow: hidden; } .overlayContent { position: relative; text-align: center; top: 25%; height: 100%; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: whitesmoke; display: block; transition: 0.3s; } .overlay a:hover, a:active { color: darkgrey; } 

 <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet"> <!-- Header Start - Includes Title, Logo, and Menu --> <header id="top"> <div class="container"> <!-- Logo --> <div class="logo"> <a href="#top" class="logo"><img src="images/1x/Asset 1.png" alt="Initials JB"></a> </div> <!-- Menu Button --> <div class='menu' onclick="menuButton(this); toggleNav()"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <!-- Title --> <div class="title"> <h1> <a href="#top">JADON BULL</a> </h1> </div> </div> </header> <!-- Header End --> <!-- Navigation Start --> <div class="container"> <nav id="myNav" class="overlay"> <div class="overlayContent"> <a href="#">Overview</a> <a href="#">Projects</a> <a href="#">Services</a> <a href="#">About Me</a> <a href="#">Contact</a> </div> </nav> </div> 

Answer 1

Here's the link to the forked version of your code: https://codepen.io/jaiko86/pen/mGvyJQ

This will do what you want it to do with the menu button. I removed (commented out) the menuButton() , and changed the z-index of .top , which contains .menu . The thing about z-index is that it will change the stacking order of sibling elements, but you can't stack it on top of or below sibling elements of its ancestors.

For example, let's say I have the following set of elements:

<elem-a>
  <nested-a1>
  <nested-a2>
  <nested-a3>
</elem-a>
<elem-b>
  <nested-b1>
  <nested-b2>
  <nested-b3>
</elem-b>

In this example, changing z-index of <nested-a1> will only affect its stacking order among its siblings, <nested-a2> and <nested-a3> . It won't have any effect on <elem-b> or its children.

Answer 2

Just changing position to absolute on the parent container fixed it.

header {
  width: 100%;
  min-height: 80px;
  padding: 0;
  background-color: whitesmoke;
  color: black;
  position: absolute;
  margin: 0px;
  border-bottom: 5px solid black;
}

 function menuButton(x) { x.classList.toggle("change"); } function toggleNav() { var x = document.getElementById("myNav"); if (x.style.height === "100%") { x.style.height = "0%"; } else { x.style.height = "100%"; } } 

 /* Global */ .white { color: #fff } html, body { margin: 0; padding: 0; background-color: darkgray; } /* Header */ header { width: 100%; min-height: 80px; padding: 0; background-color: whitesmoke; color: black; position: absolute; margin: 0px; border-bottom: 5px solid black; } .container { width: 80%; margin: auto; overflow: hidden; } header .logo { float: left; margin-top: 4px; } header .menu { float: right; margin-top: 25px; cursor: pointer; position: relative; z-index: 2; } header .title h1 { margin: 21.5px 0px 0px 0px; padding: 0; text-align: center; font-family: 'Raleway', serif; font-size: 30px; } header .title a:link, a:visited { color: black; text-decoration: none; } .bar1, .bar2, .bar3 { background-color: black; width: 35px; height: 5px; margin-bottom: 6px; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); background-color: whitesmoke; } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); background-color: whitesmoke; } /* Navigation */ .overlay { width: 100%; height: 0; position: fixed; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.9); z-index: 1; transition: 0.5s; overflow: hidden; } .overlayContent { position: relative; text-align: center; top: 25%; height: 100%; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: whitesmoke; display: block; transition: 0.3s; } .overlay a:hover, a:active { color: darkgrey; } 

 <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet"> <!-- Header Start - Includes Title, Logo, and Menu --> <header id="top"> <div class="container"> <!-- Logo --> <div class="logo"> <a href="#top" class="logo"><img src="images/1x/Asset 1.png" alt="Initials JB"></a> </div> <!-- Menu Button --> <div class='menu' onclick="menuButton(this); toggleNav()"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <!-- Title --> <div class="title"> <h1> <a href="#top">JADON BULL</a> </h1> </div> </div> </header> <!-- Header End --> <!-- Navigation Start --> <div class="container"> <nav id="myNav" class="overlay"> <div class="overlayContent"> <a href="#">Overview</a> <a href="#">Projects</a> <a href="#">Services</a> <a href="#">About Me</a> <a href="#">Contact</a> </div> </nav> </div>