Twenty Twenty-Five Mobile Menu Not Working: One Setting, Then Four Suspects

Five complaints, one block behind all of them

The wording owners use matters, since every description leads to a separate piece of one block. Note which symptom you have, on which phone, and whether it repeats for a visitor who is not logged in.

• A hamburger you never asked for. Two or three links, plenty of room, and the phone still shows an icon. It is a recurring thread in the theme's own support forum.
• A hamburger on the laptop too. The menu is collapsed at every width, not just on phones.
• A dead icon. The three lines show, a tap does nothing, and the page just sits there.
• The wrong links. The panel opens and lists every page on the site, or the links you built for the footer.
• A panel you cannot read. It opens, but the text blends into the background, or the design looks nothing like the rest of the site.

None of these needs a new plugin. They need the Site Editor, about ten minutes and a real phone. If the problem is wider than this theme, the general mobile menu guide covers classic themes and builders.

Inside the header: a pattern, a block and a 600-pixel line

Twenty Twenty-Five's header template part contains a single line: it inserts the pattern called twentytwentyfive/header. That pattern holds the Site Title block and the core Navigation block, with the overlay background set to the Base color and the overlay text set to Contrast. Look at what the shipped markup leaves out. It sets no overlay visibility value, so the block uses its default, Mobile. It also points at no saved menu at all.

The default matters because of where core WordPress draws its line. The Navigation block's stylesheet hides the hamburger button on screens 600 pixels and wider. Below that, the links fold into the overlay. Opening and closing that overlay is handled by a small script module built on WordPress's Interactivity API, registered as @wordpress/block-library/navigation/view. There is no jQuery involved and no theme script; the theme enqueues no JavaScript of its own, as the Twenty Twenty-Five review notes.

WordPress 7.0 added one more layer: an Overlay template section with a Create overlay button. A custom overlay is saved as a template part in the Navigation Overlay area. It is optional, and the standard overlay is used until someone creates one.

What breaks it on Twenty Twenty-Five, most likely first

1. Nothing is broken: Mobile is doing its job

If the complaint is a hamburger on a phone with a short menu, the block is behaving exactly as shipped. Check: open the site on a desktop browser and slowly narrow the window. If the links collapse into the icon at 599 pixels and spread out at 600, the setting is Mobile and the fix is to change it.

2. A vertical header design set to Always

The theme's alternate blog designs include a vertical header layout. Its template part, vertical-header, carries a Navigation block set to Always, so the menu is an icon at every screen size. Owners who switched designs in a template's Design panel often do not connect the two. Check: open the template the page uses and look in List View for a template part called Vertical site header.

3. A speed plugin delaying the menu's script

Optimizer features that delay JavaScript until the first scroll or tap can hold back the Navigation block's script module. The icon renders, because it is plain HTML and CSS, but the code that opens the panel has not run. Check: test in a private window with the optimizer's JavaScript delay and combine features switched off. If the menu works, add navigation/view and the Interactivity API files to the plugin's exclusion list rather than leaving the whole feature off.

4. No saved menu, so WordPress picks one

Because the shipped header points at no menu, WordPress fills it at render time. It uses the most recently published Navigation menu; failing that, it converts a classic menu or falls back to a Page List of every published page. So the day someone creates a new menu for the footer, a header that was never given its own menu can start showing the footer's links. Check: select the Navigation block and open its Options menu; under Menus, see which one is selected, if any.

5. Overlay colors or a custom overlay gone wrong

The overlay takes its colors from the Submenu & overlay background and Submenu & overlay text settings, which the theme sets to Base and Contrast. Change the palette carelessly, or set one of those two by hand, and the links can match the panel. A custom overlay template part, if one was created, belongs to the active theme and is not preserved when the theme is switched. Check: open the panel on a phone and compare it with the block's Color settings in the Styles tab.

Fixing the Twenty Twenty-Five menu in the Site Editor

1. 1

   Find the header the page really uses

   Go to Appearance, Editor, Templates and open the template assigned to the problem page. In List View, note the template part name: Header, Header with large title or Vertical site header. Edit that one, using the Edit original button.

2. 2

   Choose the overlay behavior

   Select the Navigation block. In the Settings tab, under Overlay, set Overlay visibility to Off for a menu of three or four short links, or Mobile for anything longer. Avoid Always unless you want an icon on desktop too.

3. 3

   Give the block its own menu

   Open the block's Options menu and pick a named menu under Menus, or create one. A saved choice stops WordPress from borrowing the newest menu on the site. Rename it something obvious, such as Main header menu.

4. 4

   Check the overlay colors

   In the Styles tab, under Color, confirm Submenu & overlay text contrasts with Submenu & overlay background. Then save the template part.

5. 5

   Clear every cache layer

   Purge the caching plugin, the host's cache and any CDN, because visitors are served stored HTML that still carries the old menu markup.

6. 6

   Exclude the menu script from delay

   If an optimizer delays or combines JavaScript, exclude the navigation view module and the Interactivity API from it, then retest logged out.

7. 7

   Test on two real phones

   One iPhone, one Android, private windows, no login. Open the menu, follow a link, press back, open it again.

Switching the setting to Off has a second benefit: one fewer tap on every mobile visit. The Twenty Twenty-Five speed guide explains why that matters for Interaction to Next Paint, and WordPress vs Next.js on INP explains the metric itself.

Two menus that look identical in the editor

A frequent false alarm: the owner fixes the setting, saves, and nothing changes on the live page. Usually there are two headers. Twenty Twenty-Five registers three template parts in the header area (header, vertical-header and header-large-title), and templates built from different blog designs use different ones. The editor shows whichever part belongs to the template you happen to be editing.

The same trap catches the menu itself. Each header part holds its own Navigation block, and each block can point at a different menu or at none. Fix the menu in one and the other carries on as before. A short written note of which templates use which header part saves the next person an hour. If a header disappears entirely rather than misbehaving, that is a separate problem, covered in Twenty Twenty-Five header not showing.

A menu that was never chosen is a menu WordPress will choose for you, and it picks the newest one.

Habits that keep a block menu from drifting

• Name every Navigation menu for its job, and assign each block a menu explicitly, footer blocks included.
• Keep the header menu short enough to sit in one row on a 375-pixel phone, then set Overlay visibility to Off with confidence.
• Retest the phone menu after every optimizer setting change, every WordPress major release and every switch of blog design.
• Never create a test menu on the live site; on this theme it can end up in a header that was relying on the newest menu.
• Before switching themes or activating a child theme, note your header settings, because Site Editor changes are stored per theme.

Font or style surprises tend to arrive in the same week as menu ones. The siblings of this page cover CSS that will not update and fonts that refuse to load. If the menu died the day an update landed, start with how to roll back a theme update safely. Our hosting and maintenance plans include a phone-menu check after every update.

A free theme, and a menu with four owners

Look at who touches one hamburger on this site. The theme supplies the header pattern. Core supplies the block, its script and its 600-pixel rule. The Site Editor stores your choices in the database. An optimizer chooses the moment its script runs, and a cache chooses which copy of the page gets served. Each party behaves sensibly. Nobody tests the combination on your phone.

That is the trade WordPress makes, and for a blog or a small business site it is a fine trade. When the menu is the front door to a lead-generation site, it is worth asking whether one tested codebase would serve better. Built in Next.js, the menu becomes one component that ships with the site after testing, and no plugin rewrites it on the live server. It costs more up front and needs a developer for layout changes. The honest comparison is in Twenty Twenty-Five vs Next.js, the move itself in moving Twenty Twenty-Five to Next.js, and every other theme fix in the WordPress troubleshooting library. Prefer to pass the job on? Our theme troubleshooting service does exactly this kind of work, and the theme repair team handles sites where more than the menu has come loose.