title: How to make a working navigation menu that transition from top when clicked on hamburger menu?
body: <p>I was trying to design a hamburger menu that lets users tap on while using phones and tablets but switch to the full nav bar on the desktop. I have a working navbar for desktop but I have not been able to make one for phones/tablets. I have made a checkbox to try implementing it. But when the checkbox(ham menu) is clicked, it doesn't do anything. Also, tried with negative values. If anyone can help me, I would appreciate it a lot.</p>
  <p>Here's my code:</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>    @import url("https://fonts.googleapis.com/css2?family=Montserrat&amp;display=swap");
      html,
      body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        font-family: "Montserrat", sans-serif;
      }
      a {
        text-decoration: none;
        color: aliceblue;
      }
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 8%;
        background-color: #2f2e41;
        top: 0;
        color: aliceblue;
        width: auto;
        .nav-links,
        li {
          list-style: none;
          display: inline-block;
          padding: 0 10px;
        }
        .nav-links li a {
          transition: all 0.3s ease 0s;
        }
        .nav-links li a:hover {
          color: #6e00ff;
        }
      }
      input[type="checkbox"] {
        display: none;
      }
      header .navMode .menu {
        display: none;
      }
      @media (max-width: 420px) {
        header nav .nav-links {
          background: #2f2e41;
          position: absolute;
          top: 10%;
          height: 30vh;
          width: 100%;
          right: 0%;
          display: flex;
          flex-direction: column;
          text-align: center;
          transition: all 0.3s ease;
          li {
            margin-top: 5px;
            padding: 10px 0;
            a:hover {
              color: #6e00ff;
              background: none;
            }
          }
        }
        header .navMode .menu{
          display: block;
        }
        #click:checked ~ .menuBar i:before {
          content: "\f00d";
        }
        #click:checked ~ .menuBar .nav-links {
          top: 0%;
        }
        header nav i {
          font-size: 20px;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
        &lt;a href="#" class="logo"&gt;
          &lt;p&gt;Name&lt;/p&gt;
        &lt;/a&gt;
        &lt;nav class="navMode"&gt;
          &lt;div class="menu"&gt;
            &lt;input type="checkbox" id="click"&gt;
            &lt;label for="click" class="menuBar"&gt;
              &lt;i class="fas fa-bars"&gt;&lt;/i&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;ul class="nav-links"&gt;
            &lt;li&gt; &lt;a class="navBar-links" href="#"&gt;Lorem
              &lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a class="navBar-links" href="#"&gt;Lorem
              &lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a class="navBar-links" href="#"&gt;Lorem
              &lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a class="navBar-links" href="#"&gt;lorem
              &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>