Is there an issue with the interaction of the menu in Webflow that is causing the buttons/links on the main body to stop working after the hamburger menu is opened and closed?
TL;DR
- Inspect the page after closing the menu to see if the overlay element is still present and covering content.
- Ensure the Navbar menu sets its Display to None or removes high Z-index when closed.
- Check custom animations or interactions to confirm they properly hide the menu and remove it from blocking layers.
If body buttons or links stop working after opening and closing a hamburger menu in Webflow, the issue is usually related to the Navbar menu overlay not closing properly, leaving a transparent layer above the main content.
1. Check the Navbar Menu State
- After closing the menu, inspect the page using DevTools (right-click > Inspect) to see if the dropdown menu (
.w-nav-overlayor similar class) still exists and is visible or clickable. - If it's still in the DOM and covering elements, clicks won't register on the underlying content.
2. Confirm Close Animation or Display Settings
- Go to your Navbar component in the Webflow Designer.
- Open and close the menu using the hamburger icon in preview mode and watch the corresponding overlay or menu element in the Navigator.
- Make sure the menu is set to Display: None or height: 0 when closed. It should not still be positioned absolutely or fixed on top of the page.
3. Fix Manual Overflow or Z-Index Issues
- If you’ve created custom styles or animations, make sure:
- The menu element has
overflow: hidden;during closing animations if growing/shrinking. - Z-index values are removed or reset post animation, so the hidden menu is no longer layered above the content.
4. Remove or Correct Custom Interactions
- Go to the Interactions panel and check for any custom "While Open" or "On Close" interactions applied to the menu or the page.
- Ensure they correctly reset the menu’s Display, Opacity, or Z-index once the menu is closed.
- Avoid using opacity 0 alone without setting Display: None—elements with 0 opacity still block interactions.
Summary
The core issue is likely an invisible menu layer remaining on top of your content after closing the hamburger menu. Ensure your menu properly resets its Display or Z-index when closed, either through Webflow’s built-in Navbar behavior or by correcting custom interactions that override it.