title: I want to have my hambuger menu visible when it is actually open
body: <p>So I've basically finished it but I'm not sure why the hamburger menu is still darkened in the background when it's checked, I want it to be bright and displayed above the zero layer of my page and I've tried increasing the z-index for divs I thought might fix my problem like the .hamburger div but obviously that didn't work.</p>
  <p>Edit: Sorry if my description is weak and short but I can give you more info if anything is vague.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  :root {
    --primary-color: rgba(93, 216, 253, 0.75);
    --secondary-color: rgba(255, 255, 255, 0.9);
    --overlay-color: rgba(24, 39, 51, 0.85);
    --btn-color: rgba(43, 43, 43, 1);
    --menu-speed: 0.75s;
    --menu-color: rgb(24, 255, 243);
  }
  
  a {
    text-decoration: none;
  }
  
  ul {
    list-style: none;
  }
  
  body {
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
    height: 5000px;
  }
  
  /* Utility Classes */
  .nav-blue {
    color: var(--primary-color);
  }
  
  .btn {
    display: inline-block;
    border: 1px solid #fff;
    background: var(--btn-color);
    color: #fff;
    padding: 0.75rem 2.5rem;
    margin-top: 1.6rem;
    transition: all 1s ease-in-out;
    border-radius: 2px;
  }
  
  .btn:hover {
    background: #fff;
    color: var(--btn-color);
    border: 1px solid var(--btn-color);
  }
  
  /* Navbar Section */
  #navbar {
    background: rgb(255, 255, 255);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: sticky;
    top: 0;
  }
  
  #navbar h1 {
    font-size: 1.7rem;
    font-weight: lighter;
    width: 100%;
    color: #333;
  }
  
  #navbar #nav-container {
    margin: auto;
    width: 100%;
    max-width: 1100px;
    padding: 0 2rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  
  /* Showcase Section */
  .container {
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 0 3rem;
  }
  
  #showcase {
    background: var(--primary-color);
    color: #fff;
    height: 100vh;
    position: relative;
  }
  
  #showcase::before {
    content: '';
    background: url('../IMG/mountain.jpg') no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  #showcase .showcase-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }
  
  #showcase h1 {
    font-size: 4rem;
  }
  
  #showcase p {
    font-size: 1.3rem;
  }
  
  .menu-wrap {
    z-index: 1;
  }
  
  .menu-wrap .toggler {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    width: 60px;
    height: 60px;
    opacity: 0;
  }
  
  .menu-wrap .hamburger {
    /* position: absolute; */
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hamburger Line */
  .menu-wrap .hamburger &gt; div {
    position: relative;
    flex: none;
    width: 100%;
    height: 2px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
  }
  
  /* Hamburger Lines - Top &amp; Bottom */
  .menu-wrap .hamburger &gt; div::before,
  .menu-wrap .hamburger &gt; div::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 2px;
    background: inherit;
  }
  
  /* Moves Line Down */
  .menu-wrap .hamburger &gt; div::after {
    top: 10px;
  }
  
  /* Toggler Animation */
  .menu-wrap .toggler:checked + .hamburger &gt; div {
    transform: rotate(135deg);
  }
  
  /* Turns Lines Into X */
  .menu-wrap .toggler:checked + .hamburger &gt; div::before,
  .menu-wrap .toggler:checked + .hamburger &gt; div::after {
    top: 0;
    transform: rotate(90deg);
  }
  
  /* Rotate On Hover When Checked */
  .menu-wrap .toggler:checked:hover + .hamburger &gt; div {
    transform: rotate(225deg);
  }
  
  /* Show Menu */
  .menu-wrap .toggler:checked ~ .menu {
    visibility: visible;
  }
  
  .menu-wrap .toggler:checked ~ .menu &gt; div {
    transform: scale(1);
    transition-duration: var(--menu-speed);
  }
  
  .menu-wrap .toggler:checked ~ .menu &gt; div &gt; div {
    opacity: 1;
    transition: opacity 0.4s ease 0.4s;
  }
  
  .menu-wrap .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .menu-wrap .menu &gt; div {
    background: var(--overlay-color);
    border-radius: 50%;
    width: 400vw;
    height: 400vw;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.4s ease;
  }
  
  .menu-wrap .menu &gt; div &gt; div {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .menu-wrap .menu &gt; div &gt; div &gt; ul &gt; li {
    list-style: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem;
  }
  
  .menu-wrap .menu &gt; div &gt; div &gt; ul &gt; li &gt; a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
  }
  
  .menu-wrap .menu &gt; div &gt; div &gt; ul &gt; li &gt; a:hover {
    color: var(--menu-color);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap" rel="stylesheet"&gt;
  
  &lt;nav id="navbar"&gt;
    &lt;div id="nav-container"&gt;
      &lt;a href="#"&gt;&lt;h1&gt;&lt;span class="nav-blue"&gt;Lorem&lt;/span&gt; ipsum&lt;/h1&gt;&lt;/a&gt;
      &lt;div class="menu-wrap"&gt;
        &lt;input type="checkbox" class="toggler"&gt;
        &lt;div class="hamburger"&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu"&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;header id="showcase"&gt;
    &lt;div class="container showcase-container"&gt;
      &lt;h1&gt;Welcome&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed beatae minima laudantium rem dolorum labore
      at, aliquid quaerat fugit accusantium.&lt;/p&gt;
      &lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>