title: Make navbar close on click of menu item
body: <p>I'm having trouble making my navbar disappear when clicking on one of the menu items when I'm in the mobile version of the website. I know there are already questions here with similar problems but most of the solutions are using jquery and I'm really new to javascript so I'm having trouble with that :/ I'd really appreciate some help with this, I'm at my wits' end!</p>
  <p><strong>The problem:</strong> In mobile I have a menu button that opens a full screen navbar with my menu items. Clicking the button works perfectly, it makes the navbar appear and disappear. However, when clicking on one of the links it scrolls to the right position on the page but the navbar stays open. I tried adding an eventListener to the menu items just like for the menu button but that didn't work at all...</p>
  <p><strong>Here's the code:</strong></p>
  <p>HTML</p>
  <pre><code>&lt;nav&gt;
        &lt;div class=&quot;logo&quot;&gt;
          &lt;a href=&quot;#&quot;
            &gt;&lt;img
              src=&quot;./images/original_white.png&quot;
              alt=&quot;disco milk logo&quot;
              width=&quot;300px&quot;
              height=&quot;auto&quot;
              class=&quot;logo-still&quot;
          /&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;menunav&quot;&gt;
          &lt;ul class=&quot;nav-links&quot;&gt;
            &lt;li&gt;
              &lt;a href=&quot;#about&quot;&gt;about us&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#say-hello&quot;&gt;say hello!&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;burger&quot;&gt;
            &lt;img
              src=&quot;./images/menu_icon.png&quot;
              alt=&quot;menu icon&quot;
              class=&quot;burger-icon&quot;
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>nav {
      width: 100vw;
      padding-left: 37px;
      padding-right: 37px;
    }
  
    .nav-links {
      position: absolute;
      right: 0px;
      height: 100vh;
      width: 100vw;
      background-color: #231f20;
      z-index: 1;
      top: 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateX(100%);
      justify-content: center;
      transition: transform 0.5s ease-in;
    }
  
    .nav-links li {
      padding: 10px;
      opacity: 0;
    }
  
    .nav-active {
      transform: translateX(0%);
    }
  </code></pre>
  <p>and the JS</p>
  <pre><code>const navSlide = ()=&gt;{
      const burger = document.querySelector('.burger');
      const nav = document.querySelector('.nav-links');
      const navLinks = document.querySelectorAll('.nav-links li');
      
      burger.addEventListener('click', ()=&gt;{
          // Toggle Nav
          nav.classList.toggle('nav-active');
          // Animate Links
          navLinks.forEach((link, index)=&gt;{
              if(link.style.animation){
              link.style.animation = '';
              } else {
              link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.5}s`;
              }
          });
          //Burger Animation
          burger.classList.toggle('toggle');
  
      });
  
  
  }
  
  navSlide();
  </code></pre>
  <p>I really appreciate any help!! Thanks so much :)</p>