1

I don't understand why my mobile menu doesn't close after clicking on menu's link. How can I fix this?

(() => {
  const menuButton = document.querySelector(".menu-button");
  const menuOverlay = document.querySelector(".menu-overlay");
  const items = document.querySelectorAll(".nav__item");

  menuButton.addEventListener("click", function () {
    menuButton.classList.toggle("active");
    menuOverlay.classList.toggle("open");
  });

  items.forEach((navItem) => {
    menuButton.classList.remove("active");
    menuOverlay.classList.remove("open");
  });
})();

HTML

<nav class="nav__items">
  <a class="nav__item" href="#about">
    About us
  </a>
  <a class="nav__item" href="#dogs">
    Available puppies
  </a>
  <a class="nav__item" href="#gallery">
    Gallery
  </a>
  <a class="nav__item" href="#testimonials">
    Testimonials
  </a>
  <a class="nav__item" href="#contacts">
    Contact us
  </a>
</nav>;
Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
Anatolii Horobets
  • 13
  • 2

1 Answers1

0

It should be something like that

(() => {
    const menuButton = document.querySelector(".menu-button");
    const menuOverlay = document.querySelector(".menu-overlay");
    const items = document.querySelectorAll(".nav__item");

    menuButton.addEventListener("click", function () {
        menuButton.classList.toggle("active");
        menuOverlay.classList.toggle("open");
    });

    items.forEach((navItem) => {
        navItem.addEventListener("click", () => {
            menuButton.classList.remove("active");
            menuOverlay.classList.remove("open");
        });
    });
})();
Lukas
  • 2,263
  • 1
  • 4
  • 15