Ensure Mobile Menu Links Close The Menu

There may be circumstances where your Webflow navigation menu doesn't close on a mobile layout.

This is an issue that can occur when a link doesn't load a new page. Local reference links that take you to specific parts of pages are frequently the cause of this problem. Your link may still work, but the menu stays open - unideal for a polished site.

But what can you do about it? Thankfully, it's a simple solution. I've prepared the code here, which targets the Webflow elements of a navigation bar, so shouldn't need an customisation for your specific links!

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const menuToggle = document.querySelector(".w-nav-button");
    const menuLinks = document.querySelectorAll(".w-nav-menu a");

    menuLinks.forEach(link => {
      link.addEventListener("click", function () {
        const menuOpen = menuToggle.getAttribute("aria-expanded") === "true";
        if (menuOpen) {
          menuToggle.click();
      });
    });
  });
</script>

Put this simple code block in your sites after-body section and test to see if it achieves what you need. The code should resolve this specific issue by selecting all mobile-menu links then, if the menu is open, it will trigger a fake-menu-click to close it as you click your link.

In practice, this feels like how it should work by default, and is something I use when utilising reference links on sites to ensure no buggy behaviour.