QAlaunch

Webflow mobile menu not opening

If a Webflow mobile menu will not open on the published site, the usual causes are custom interactions on the menu button clashing with the Navbar element’s built-in toggle, a script error from custom code that stops Webflow’s JavaScript, or the menu button being hidden or covered at tablet and phone breakpoints. Use either the native Navbar behaviour or your own interaction, not both, check the button at each breakpoint, and look for console errors on the live site.

Opens your site in a real browser on desktop and phone. Free, about two minutes, no signup. Full report from $19.

What you'll see

At tablet or phone size the hamburger button does not appear, does nothing when tapped, or opens a menu that slides behind the page content. On one-page sites the menu opens but stays open after tapping a section link, covering the section the visitor wanted.

Why it happens

1. Custom interactions clash with the Navbar

The Navbar element has its own open and close behaviour. Adding a click interaction to the same menu button means two things respond to one tap, and the menu may open and close instantly or not at all.

2. A script error stops Webflow’s JavaScript

Custom code in the head, footer or an Embed element that throws an error can prevent Webflow’s site script from running fully, and the Navbar toggle is part of it.

3. The button is hidden or covered at that breakpoint

A display: none set on the menu button at tablet, or a section with a higher z-index overlapping the navbar, makes the button missing or untappable. A nav menu with a low z-index opens behind the content.

4. The navbar is not a Navbar element

Headers built from plain divs have no built-in menu button, so nothing toggles at smaller sizes unless you build the interaction yourself.

How to fix it

  1. In the Designer, select the Navbar and switch to the Tablet, Mobile landscape and Mobile portrait breakpoints. Confirm the Menu button is visible and not set to display: none at any of them.
  2. Open the Interactions panel with the menu button selected. If you are using the Navbar’s native toggle, remove custom click interactions from the button; if you want your own animation, use a plain div header instead.
  3. Publish, open the live site, set DevTools to a phone width and watch the Console for errors from custom code. Temporarily remove suspect embeds and republish to confirm.
  4. Give the Navbar a position and a z-index higher than the page sections, and check that no section uses a negative top margin to slide under the header.
  5. For one-page sites, add an interaction or a small script that closes the menu when a section link is tapped, so it does not stay open over the content.

How to check it's fixed

  • On the published site at 991px, 767px and 479px wide, open the menu, tap a link and confirm it closes and navigates.
  • Test on a real phone, including a link to a section on the same page.

What a QAlaunch scan shows for this

  • Phone screenshots of the published site with a visual review that points out a missing, overlapped or cut-off menu.
  • Console errors from custom code that can stop Webflow’s scripts.
  • Navigation links that return errors when followed.
  • The scan does not open the menu and tap each item, so a toggle that appears fine but does not respond still needs a manual tap test.

See exactly what a full report contains in the sample report.

Frequently asked questions

Why does my Webflow menu work in the Designer but not live?

The Designer preview does not run custom code from Site settings or Embed elements. On the published site that code runs, and an error in it can stop the Navbar script.

Why does the menu stay open after tapping a link on a one-page site?

The Navbar closes on page navigation, but a link to a section on the same page does not navigate. Add an interaction or script that closes the menu on link click.

At what width does the Webflow menu collapse?

The Navbar setting “Menu” lets you choose the breakpoint where it collapses into the button, commonly Tablet. Check that setting if the hamburger appears at the wrong size.

Done for you · not automated

Rather have a QA engineer test it by hand?

If this is a site you're launching or handing to a client, I'll go through it by hand, including the Webflow-specific issues a scan can't reach, like logged-in flows.

$299one-time · 3 business days
  • Up to 10 key pages tested by hand, not a scan
  • Every flow a customer uses: forms, sign-up, checkout, booking
  • Real mobile and desktop browsers
  • A written report in plain language, with screenshots
  • A 15-minute call to walk you through it
  • 10 years of professional QA experience

Tell me about your site and I'll reply personally, usually the same day.

No payment now. I'll confirm scope and price first.

Related fixes

More for Webflow: all Webflow fixes

Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.

Sources: Webflow community: nav menu button · Webflow community: mobile menu not closing after section link