title: Trying to make nav bar hidden when in mobile view
body: <p>My navbar currently appears like this when I inspect and put it to a mobile device such as iPhone X: <img src="https://i.gyazo.com/7d0b28abdc172c13208d64b1cdde2559.png" alt="screenshot" /></p>
  <p>However, I want it to appear like this when in mobile: <img src="https://i.gyazo.com/5f67b6888177c20b2e087838f29470b0.png" alt="screenshot" /></p>
  <p>... and for the bar to open up as it does when the button is clicked.</p>
  <p>To get it looking like I want, I use <code>display:none</code> in CSS however this then means when you click the button to display it nothing appears. My HTML and CSS is as follows:</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-js lang-js prettyprint-override"><code>const navSlide = () =&gt; {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  
    //Toggles the nav bar
  burger.addEventListener('click', () =&gt; {
    nav.classList.toggle('nav-active');
  
    //animates the links
     navLinks.forEach((link, index) =&gt; {
        if (link.getElementsByClassName.animation) {
            link.style.animation = ``;
        } else {
             link.style.animation = `navLinkFade 0.5s ease forwards ${index /7 + 0.5}s`;
        }
     });
     //burger animation
     burger.classList.toggle('toggle');
  
    });
  
  
  }
  
  navSlide();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width:640px){
      body{
          overflow-x: hidden;
      }
      .nav-links{
          position: absolute;
          right: 0px;
          height: 92vh;
          top: 8vh;
          background-color: #5d4954;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 50%;
          transform: translateX(100%);
          display: none;
      }        
      .nav-links li{
          opacity: 0;
      }
  
      .burger{
          display: block;
      }
  }
  .nav-active{
      transform: translateX(0%);
      transition: transform 0.5s ease-in;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;meta name="author" content="Lewis Haddon"&gt;
          &lt;title&gt;Business website&lt;/title&gt;
          &lt;link rel="stylesheet" href="./css/test2.css" type="text/css"&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
         &lt;nav&gt;
             &lt;div class="logo"&gt;
                 &lt;h4&gt;The Nav&lt;/h4&gt;
             &lt;/div&gt;
             &lt;ul class="nav-links"&gt;
                 &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;S3&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;RS6&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
             &lt;div class="burger"&gt;
                 &lt;div class="line1"&gt;&lt;/div&gt;
                 &lt;div class="line2"&gt;&lt;/div&gt;
                 &lt;div class="line3"&gt;&lt;/div&gt;
             &lt;/div&gt;
         &lt;/nav&gt;
  
         &lt;script src="app.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
  
  &lt;/html&gt;
     </code></pre>
  </div>
  </div>
  </p>