I want to show the overlay menu by checking the checkbox (class "hamburger-checkbox"). The problem is that after checking the checkbox the overlay menu doesn't disappear (check line 154 in CSS) even the code is the same as for the hamburger menu animation (e. g. line 149 in CSS):

Link to CodePen: https://codepen.io/matu-sk/pen/ZEJrypw

Code:

HTML

<nav>
  <div class="hamburger-menu">
    <div class="hamburger-wrapper">
      <input class="hamburger-checkbox" type="checkbox">
      <div class="hamburger-bun">
        <div class="hamburger-burger">
        </div>
      </div>
    </div>
  </div>
  <div class="overlay-menu">
    <div class="overlay-nav-wrapper">
      <ul class="nav overlay-nav">
        <li><a class="nav-link-hidden" href="">a</a></li>
        <li><a class="nav-link-hidden" href="">b</a></li>
        <li><a class="nav-link-hidden" href="">c</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  color: #04080f;
  background: #ffffff;
  font-family: "Nunito", sans-serif;
}

/** NAVIGATION **/

nav {
  margin: auto;
  min-width: 502px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  list-style: none;
}

.nav a {
  padding: 20px;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  color: #04080f;
}

.overlay-menu {
  margin: auto;
  z-index: 1;
  width: 200px;
  height: 155px;
  background-color: yellow;
  text-align: center; 
  line-height: 3em;
}

.overlay-nav-wrapper {
  margin: auto;
  width: 200px;
  height: 200px;
}

.overlay-nav a:hover {
  color: #424CF9;
}

@media screen and (max-width: 800px) {
  nav {
    margin: auto;
  }
}

/** HAMBURGER MENU **/

.hamburger-menu {
  display: inline-block;
  vertical-align: middle;
  padding: 10px 25px 10px 15px;
  z-index: 2;
}

.hamburger-wrapper {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
}

.hamburger-wrapper .hamburger-bun:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  background: #04080f;
  box-shadow: 0 0 0 5px #ffffff;
  border-radius: 30px;
  transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
  top: 10%;
  right: 0;
}

.hamburger-wrapper .hamburger-bun:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  background: #04080f;
  box-shadow: 0 0 0 5px #ffffff;
  border-radius: 30px;
  transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
  bottom: 10%;
  left: 0;
}

.hamburger-wrapper .hamburger-bun .hamburger-burger {
  position: absolute;
  display: flex;
  align-items: center;
  height: 30px;
  width: 30px;
}

.hamburger-wrapper .hamburger-bun .hamburger-burger:before, .hamburger-wrapper .hamburger-bun .hamburger-burger:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  background: #04080f;
  box-shadow: 0 0 0 5px #ffffff;
  border-radius: 30px;
  transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
}

.hamburger-wrapper .hamburger-checkbox {
  display: block;
  position: absolute;
  opacity: 0;
  z-index: 1;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun:before, .hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun:after, .hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun :before, .hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun :after {
  background: #424CF9;
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun:before, .hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun:after {
  width: 0;
  display: none;
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun .hamburger-burger:before {
  transform: rotate(135deg);
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun .hamburger-burger:after {
  transform: rotate(45deg);
  box-shadow: 0 0 0 0 #ffffff;
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .overlay-menu {
  display: none;
}

CodePudding user response：

Input has no closing tag. If you want the hamburger to toggle the checkbox, use <label>:

<div class="hamburger-menu">
  <div class="hamburger-wrapper">
    <input type="checkbox" class="hamburger-checkbox" id="hamburger-checkbox">
    <label for="hamburger-checkbox">
      <div class="hamburger-bun">
        <div class="hamburger-burger">
        </div>
      </div>
    </label>
  </div>
</div>

You can hide the checkbox, so only the <label> will be seen.

CodePudding user response：

Please try this way

<nav>
   <div class="hamburger-menu">
      <div class="hamburger-wrapper">
         <input type="checkbox" class="hamburger-checkbox"></input>
         <div class="hamburger-bun">
            <div class="hamburger-burger">
            </div>
         </div>
         <div class="overlay-menu">
            <div class="overlay-nav-wrapper">
               <ul class="nav overlay-nav">
                  <li><a class="nav-link-hidden" href="">a</a></li>
                  <li><a class="nav-link-hidden" href="">b</a></li>
                  <li><a class="nav-link-hidden" href="">c</a></li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</nav>