How to fix a mobile menu not opening in Webflow?

When a mobile menu does not open on tap, it usually comes down to one of a few common issues — missing interactions, z-index conflicts, overflow settings, or structure problems with the Navbar component. Here is how to diagnose and fix each one.

Check the Menu Interaction

The most common cause is a missing or broken interaction on the hamburger button.

Verify the interaction exists. Select the hamburger menu button inside your Navbar component. Open the Interactions panel (tab with the lightning icon). You should see an interaction tied to the button — typically an onClick trigger that opens the mobile menu dropdown. If there is no interaction, the button does nothing when tapped.

Recreate the interaction if needed. If the interaction is missing, add one:

1. Select the hamburger button.
2. In the Interactions panel, click the plus icon and choose "On Click" as the trigger.
3. Add an action: "Show" the mobile nav menu element (or use an animation that slides it in).
4. Add a second action on the same trigger to "Hide" it when clicked again, or use a toggle-class approach.

If you are using Webflow's prebuilt Navbar component, these interactions should already be in place. If they were accidentally deleted, the fastest fix is to replace the navbar with a fresh Navbar component from the Add panel.

Check Z-Index and Overlapping Elements

If the menu opens but is hidden behind other elements, the z-index needs adjusting.

1. Select the mobile menu dropdown.
2. In the Style panel, set a high z-index value (e.g., 999 or higher).
3. Make sure no parent container has a lower z-index that overrides it.

Check Overflow Settings

If a parent element has overflow: hidden, the dropdown menu may be clipped and invisible even when "open."

1. Select the Navbar's parent container.
2. In the Style panel, check the Overflow setting.
3. Change it from Hidden to Visible (or Auto if scrolling is needed).

Check the Mobile Breakpoint Visibility

The mobile menu should be visible at smaller breakpoints while the desktop nav links are hidden.

1. Switch to the mobile breakpoint in the Designer.
2. Confirm the hamburger button is visible (display is not set to "None").
3. Confirm the desktop nav links are hidden at the mobile breakpoint.
4. Check that the mobile menu dropdown starts as display: none and only appears via the interaction.

Check for Conflicting Custom Code

If you have custom JavaScript on your site (in Project Settings > Custom Code), it may interfere with the menu's click handler. Temporarily remove any custom scripts and test the menu. If it works without the scripts, the code is the culprit — adjust it to avoid conflicting with the navbar element.

Quick Checklist

• Hamburger button has an onClick interaction that shows the dropdown.

• Mobile menu z-index is higher than overlapping elements.

• No parent has overflow: hidden clipping the dropdown.

• Mobile breakpoint shows the hamburger and hides desktop links.

• No custom JS is blocking the click event.

Most mobile menu issues in Webflow are caused by missing or broken interactions on the hamburger button. Verify that first, then check z-index, overflow, and visibility settings to cover the remaining cases.