How to reset a toggle that is active when an href is clicked on

You could visit my website at owenngimli.com.

If you inspect it in mobile size, there should be a responsive navbar which covers the whole page. The thing is, when i press on ‘contact’, it should then close the navbar and scroll the page down to the contact section.

I’m using javascript to toggle the burger and the navbar. The syntax is as such:

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links-mobile");
  const navLinks = document.querySelectorAll(".nav-links-mobile li");

  burger.addEventListener("click", () => {
    nav.classList.toggle("nav-active");

    // Animate Links

    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = "";
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${
          index / 7 + 0.3
        }s`;
      }
    });

    // Burger Animation

    burger.classList.toggle("toggle");
  });
};

navSlide();

so far, i tried adding another function which removes the nav-active class. However, this causes the burger to work wrongly. The function i tried adding was an onclick function with syntax as such:

const testFunc = () => {
   const nav = document.querySelector(".nav-links-mobile");

   nav.classList.remove("nav-active");
 };

any help would be very appreciated thank you so much!

Answer

you could add a jquery function that gets triggered when contact button is clicked.

$('#foo').trigger('click');

where foo is the id of the close button on the side nav.

hope it helps. Feel free to comment if you need any help or you need a vanilla javascript solution.