title: Mobile Menu Not Closing Upon Selection
body: <p>I have a mobile menu that appears on smaller devices, everything is working correctly except when a selection is made the mobile menu still displays even though my code should hide it.</p>
  <p>Thank you for your time</p>
  <p>Below is the js code I'm using for my mobile menu</p>
  <pre><code>const menu = document.querySelector(&quot;#mobile-menu&quot;);
  const menuLinks = document.querySelector(&quot;.navbar__menu&quot;);
  const navLogo = document.querySelector(&quot;#navbar__logo&quot;);
  
  // Display Mobile Menu
  const mobileMenu = () =&gt; {
    menu.classList.toggle(&quot;is-active&quot;);
    menuLinks.classList.toggle(&quot;active&quot;);
  };
  
  menu.addEventListener(&quot;click&quot;, mobileMenu);
  
  //  Close mobile Menu when clicking on a menu item
  const hideMobileMenu = () =&gt; {
    const menuBars = document.querySelector(&quot;.is-active&quot;);
    if (window.innerWidth &lt;= 768 &amp;&amp; menuBars) {
      menu.classList.toggle(&quot;is-active&quot;);
      menuLinks.classList.remove(&quot;active&quot;);
    }
  };
  
  menuLinks.addEventListener(&quot;click&quot;, hideMobileMenu);
  navLogo.addEventListener(&quot;click&quot;, hideMobileMenu);
  </code></pre>
  <p>Here is the mobile menu html</p>
  <pre><code>    &lt;!-- Navbar Section --&gt;
      &lt;nav class=&quot;navbar&quot;&gt;
        &lt;div class=&quot;navbar__container&quot;&gt;
          &lt;a href=&quot;#home&quot; id=&quot;navbar__logo&quot;&gt;TEST&lt;/a&gt;
          &lt;div class=&quot;navbar__toggle&quot; id=&quot;mobile-menu&quot;&gt;
            &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;ul class=&quot;navbar__menu&quot;&gt;
            &lt;li class=&quot;navbar__item&quot;&gt;
              &lt;a href=&quot;#home&quot; class=&quot;navbar__links&quot; id=&quot;home-page&quot;&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;navbar__item&quot;&gt;
              &lt;a href=&quot;#about&quot; class=&quot;navbar__links&quot; id=&quot;about-page&quot;&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;navbar__item&quot;&gt;
              &lt;a href=&quot;#practices&quot; class=&quot;navbar__links&quot; id=&quot;practices-page&quot;
                &gt;Practice&lt;/a
              &gt;
            &lt;/li&gt;
            &lt;li class=&quot;navbar__btn&quot;&gt;
              &lt;a href=&quot;#contact&quot; class=&quot;button&quot; id=&quot;contact-page&quot;&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>