WordPress Mobile Menu Not Working: Why the Hamburger Does Nothing

The tap that goes nowhere, and its cousins

A broken mobile menu fails in more than one way, and the exact failure narrows the search. Note which of these you see, on which device and browser, and whether it changes when you are logged in.

• The hamburger icon does nothing at all when tapped.
• The panel opens, the icon turns into an X, and the panel is empty.
• The panel opens behind the page content, a slider or a cookie banner.
• Submenus will not expand, or every submenu opens at once.
• At some screen widths neither the desktop menu nor the hamburger appears.
• Everything works in desktop browser emulation and fails on a real phone.

Markup, script, styles: what a hamburger is made of

Every mobile menu has three parts. The theme prints the menu's HTML, from a classic menu location or from a Navigation block in a header template. A small script listens for the tap and toggles a class or an attribute. CSS hides the desktop menu below a set width and shows the panel when the class changes. An empty panel points at the HTML. A tap that does nothing points at the script. A panel that opens out of sight points at the CSS. Keep that map in mind and most checks below take a minute.

Suspects in the order we check them

An optimizer rearranged the menu script

Combining, deferring and delaying JavaScript change the order and timing in which scripts run. A menu script that expects jQuery, or expects to run after the page has loaded, can break silently. Two recent support threads make the point: OceanWP staff acknowledged a mobile menu that fails while SiteGround Speed Optimizer combines JavaScript, and a Neve owner found that same plugin behind a hamburger that ignored taps in iOS Safari. Divi defers jQuery to the footer by default, and Avada's docs warn that deferring jQuery can break scripts. Check: turn off combine, defer and delay options, purge every cache, and test logged out. Logged-in users often skip the optimized files entirely.

Another script failed first

Open the browser console. An error such as jQuery is not defined, or any uncaught error in a combined bundle, can stop the rest of that file from running, menu code included. The file path in the error names the theme or plugin at fault. Our theme JavaScript errors page explains how to read them.

The mobile menu has nothing to show

Many themes build the phone header separately. Storefront registers its own Handheld Menu location. Kadence keeps a separate Tablet/Mobile header whose Off Canvas area holds the Mobile Navigation. GeneratePress Premium's Mobile Header can use a different menu. In a classic theme, check Appearance > Menus > Manage Locations. With nothing assigned, WordPress may fall back to a list of pages or print nothing, depending on the theme. Bugs exist too: Kadence 1.5.1 opened an empty drawer even with every location assigned, and an Astra user reported an empty off-canvas menu on real phones.

Two breakpoints that disagree

The theme decides at what width the hamburger appears. If a builder menu or custom CSS uses a different width, there is a band where neither menu shows, or both do. Say the theme switches at 921 pixels and a builder menu switches at a smaller width: tablets in between get a squeezed desktop menu. Defaults from the themes we track:

Block navigation settings

In block themes the core Navigation block decides, through its Overlay Menu setting: Off, Mobile or Always. Twenty Twenty-Five users who wanted a plain menu on phones had to set it to Off in the header template part. WordPress 7.1 made mobile submenus open already expanded in some themes, which Ollie fixed in version 1.6.3. In Bricks, removing the toggle from Nav (Nestable) leaves nothing at the mobile breakpoint, and staff marked that report as not a bug.

The panel opens where nobody can see it

Inspect the open panel. If it exists but sits under a sticky header, slider or banner, its z-index is lower. If it is cut off, a parent element has overflow hidden. If a fixed panel scrolls away with the page, a parent element has a CSS transform, which makes fixed positioning relative to that parent instead of the screen. Storefront users with long submenus have reported double scrollbars, which support answered with a CSS workaround.

Why DevTools says yes and the phone says no

Desktop emulation resizes the window. It does not run Safari's engine, it does not reproduce touch quirks, and it does not change accessibility settings. OceanWP users have reported a menu icon missing on real devices but present in Chrome's emulation, and a menu stuck open when the phone's Reduce Motion setting is on. Some caching setups also keep a separate cache for mobile visitors, so a phone can receive an older or differently optimized page than your laptop. Test on a real phone, in a private tab, logged out, before you trust any result.

Bringing the hamburger back, one switch at a time

1. 1

   Reproduce it honestly

   Use a real phone, a private tab and no login. Note the browser, the screen width and which symptom you see.

2. 2

   Read the console

   Connect the phone to a desktop browser's remote debugging, or reproduce at the same width on desktop, and look for red errors on load and on tap.

3. 3

   Switch off script optimization

   Disable combine, defer and delay JavaScript settings, purge all caches, and retest. If the menu works, re-enable options one at a time and exclude the theme's navigation script from the one that breaks it.

4. 4

   Check what the menu should contain

   Confirm a menu is assigned to every mobile location, or that the Navigation block in the header template has items and the overlay setting you want.

5. 5

   Line up the breakpoints

   Make the theme's mobile breakpoint and any builder menu breakpoint the same width, using the theme's setting or filter.

6. 6

   Inspect the open panel

   Look for low z-index, overflow hidden or a transform on a parent. Fix it in a child theme or the theme's custom CSS, not in the parent's files.

7. 7

   Isolate on staging if it persists

   Disable plugins one by one, then try a default theme, to learn whether a plugin or the theme owns the fault.

Keeping the menu tappable after every update

• Make tapping the mobile menu on a real phone part of every update and every optimization change, before anyone calls it done.
• Run one optimization plugin, and keep a written list of the scripts excluded from delay and combine.
• Keep the theme's breakpoint and any builder breakpoints written down in one place.
• Read theme changelogs for navigation fixes. Hello Elementor 3.3.0, for one, drew a support thread titled Theme 3.3.0 Broke Mobile Navigation.

Theme-specific fixes, with the real setting names, are collected for Astra, GeneratePress, Blocksy, Divi, Hello Elementor, Neve, Storefront, Twenty Twenty-Five, Ollie, Bricks, Hestia and OceanWP. Kadence owners should read Kadence header builder mobile issues.

A three-line icon with four owners

On a typical WordPress site the mobile menu's HTML comes from the theme, its script from the theme or builder, its timing from an optimizer, and its delivery from a cache. Each vendor tests its own part. Nobody tests the combination on your site, on your visitors' phones, after Tuesday's updates. That is why the same menu can break twice in one year with no one touching it.

In a Next.js build the menu is one component, written, styled and tested with the rest of the site, with no optimizer rewriting it in production. Responsiveness to taps also counts toward Interaction to Next Paint, which we compare in WordPress vs Next.js INP. For the full picture see WordPress vs Next.js and what a move to Next.js involves; for phone speed generally, theme mobile speed. If you want the menu fixed today instead, our theme troubleshooting service finds the conflict and theme repair makes it stick. More symptoms live in the troubleshooting section and under WordPress repair.