Hamburger Navbar stay open when using browser go back button on mobile

Design help Animations & Interactions
1

Hello Webflow Community

I’m using the standard navbar-element in Webfow with hamburger button on mobile view. If I open the hamburger menu on the mobile and switch to another site and then use the browser’s go back button the hamburger menu at the previews page is still open.

You can test it at the following site but it also effects all other client sites: https://www.headstarterz.com/

It seams, the mobile browser doesn’t reload the site to reset the navbar-open-interaction. Is this a bug?

2

What I’m aware of Its a standard behaviour of browser “history”, you can check it on other sites than only on clients. This has nothing to do with Webflow it is how Web API “history” works.

3

I’m curious about this same issue.

I would like the navbar to always be closed whenever the page is visited, even though it’s doing the “correct” with respect to browser history.

Is there some custom code that could be applied that would ensure that the menu is always in a closed state when the page is visited?

4

I solved it with this script:

<script>
// Get the container element
var container = document.getElementById('nav-menu'); // replace it with the container ID which contains all the links

// Get all the link elements inside the container
var links = container.querySelectorAll('a');

// Now, 'links' is a NodeList containing all the links inside the container
// You can loop over it like this:
links.forEach(function(link) {
    // Add an event listener for the click event
    link.addEventListener('click', function(event) {
        // Execute your custom action
        document.querySelector(".w-nav-button").click(); // replace it with your hamburger menu class
    });
});
</script>

Franco Pariani, GoGrow

1 Like