Links or buttons on page won't work after menu closes

Community resources General
1

Hi There

Buttons or links aren’t clickable after my menu closes?
Anyone know how to help?

https://pickpiko.webflow.io/
Preview link

Thanks alot!

Dorus

1 Like
2

Hey @Dorus_van_Keulen1, you are experiencing this behaviour, because you have set up your menu within the Webflow navbar component. Clicking the Menu Button opens an invisible dropdown in the background, which I assume never closes, as you’re closing your custom menu with an interaction.

To solve this, remove the native navbar component and place everything within a regular div. Let me know if this works for you.

1 Like
3

Hi @Dorus_van_Keulen1
Try this once
Only possible with custom code.

<script>
$('.w-nav-menu').on('click', 'a', function() {
  $('.w-nav-button').triggerHandler('tap');
});
</script>
1 Like
4

Thanks alot Julian, this helped!

1 Like
5

Hello Everyone,

I encountered the same issue recently. The problem originates from an automatically created class named “w-nav-overlay” within the navbar container. This class extends across the entire page when the menu is opened. If you are customizing the menu bar for mobile or tablet views, this class may prevent other buttons on the website from working because it overlays all other HTML elements. As it serves no apparent purpose, I successfully removed it using the following custom code:

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Select the target node to observe - typically the body or document
    var targetNode = document.body;

    // Create a mutation observer to react when new nodes are added
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(addedNode) {
                if (addedNode.nodeType === Node.ELEMENT_NODE && addedNode.classList.contains('w-nav-overlay')) {
                    // Remove the node if it has the class 'w-nav-overlay'
                    addedNode.remove();
                }
            });
        });
    });

    // Configuration of the observer:
    var config = { childList: true, subtree: true };

    // Start observing
    observer.observe(targetNode, config);

    // Optional: disconnect observer later if no longer needed
    // observer.disconnect();
});
</script>

The Script will basically remove the class as soon as the DOM is loaded. I have so far not have any issues with this but would love to hear if this causes any issues with someone in the community.

1 Like