Mobile Menu Not Closing Upon Selection

Question

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.

Thank you for your time

Below is the js code I'm using for my mobile menu

const menu = document.querySelector("#mobile-menu");
const menuLinks = document.querySelector(".navbar__menu");
const navLogo = document.querySelector("#navbar__logo");

// Display Mobile Menu
const mobileMenu = () => {
  menu.classList.toggle("is-active");
  menuLinks.classList.toggle("active");
};

menu.addEventListener("click", mobileMenu);

//  Close mobile Menu when clicking on a menu item
const hideMobileMenu = () => {
  const menuBars = document.querySelector(".is-active");
  if (window.innerWidth <= 768 && menuBars) {
    menu.classList.toggle("is-active");
    menuLinks.classList.remove("active");
  }
};

menuLinks.addEventListener("click", hideMobileMenu);
navLogo.addEventListener("click", hideMobileMenu);

Here is the mobile menu html

    <!-- Navbar Section -->
    <nav class="navbar">
      <div class="navbar__container">
        <a href="#home" id="navbar__logo">TEST</a>
        <div class="navbar__toggle" id="mobile-menu">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
        <ul class="navbar__menu">
          <li class="navbar__item">
            <a href="#home" class="navbar__links" id="home-page">Home</a>
          </li>
          <li class="navbar__item">
            <a href="#about" class="navbar__links" id="about-page">About</a>
          </li>
          <li class="navbar__item">
            <a href="#practices" class="navbar__links" id="practices-page"
              >Practice</a
            >
          </li>
          <li class="navbar__btn">
            <a href="#contact" class="button" id="contact-page">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

Answer 1

Created this snippet to attempt to reproduce the issue and I don't see or understand the problem?

1. User can click on mobile nav icon (3 bars) and have it display the "nav"
2. User can click on a nav item.
3. When user clicks on nav item it closes mobile nav.

If there are some other circumstances, or I didn't understand the question, please feel free to insert this code snippet into your question and add more details. Also not sure why window.innerWidth has to be less than 768 in that one conditional.

Also, you can probably just run the mobileMenu() function instead of essentially re-writing it inside that if clause:

 if (window.innerWidth <= 768 && menuBars) {
    menu.classList.toggle("is-active");
    menuLinks.classList.remove("active");
  }

can turn into:

  if (window.innerWidth <= 768 && menuBars) {
    mobileMenu();
  }

const menu = document.querySelector("#mobile-menu");
const menuLinks = document.querySelector(".navbar__menu");
const navLogo = document.querySelector("#navbar__logo");

// Display Mobile Menu
const mobileMenu = () => {
  menu.classList.toggle("is-active");
  menuLinks.classList.toggle("active");
};

menu.addEventListener("click", mobileMenu);

//  Close mobile Menu when clicking on a menu item
const hideMobileMenu = () => {
  const menuBars = document.querySelector(".is-active");
  if (window.innerWidth <= 768 && menuBars) {
    menu.classList.toggle("is-active");
    menuLinks.classList.remove("active");
  }
};

menuLinks.addEventListener("click", hideMobileMenu);
navLogo.addEventListener("click", hideMobileMenu);

.navbar__menu {
display: none;
}
.navbar__menu.active {
display: flex;
}
.navbar__toggle {
  height: 1rem;
}
.navbar__toggle .bar {
  background: green;
  height: 5px;
  width: 5px;
  padding: 3px;
  display: block;
  border: 1px solid black;
  content: 'x';
}
#mobile-menu {
display: flex;
}
#mobile-menu.is-active {
  background: green;
}

<!-- Navbar Section -->
    <nav class="navbar">
      <div class="navbar__container">
        <a href="#home" id="navbar__logo">TEST</a>
        <div class="navbar__toggle" id="mobile-menu">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
        <ul class="navbar__menu">
          <li class="navbar__item">
            <a href="#home" class="navbar__links" id="home-page">Home</a>
          </li>
          <li class="navbar__item">
            <a href="#about" class="navbar__links" id="about-page">About</a>
          </li>
          <li class="navbar__item">
            <a href="#practices" class="navbar__links" id="practices-page"
              >Practice</a
            >
          </li>
          <li class="navbar__btn">
            <a href="#contact" class="button" id="contact-page">Contact</a>
          </li>
        </ul>
      </div>
    </nav>