Twenty Twenty-Four Mobile Menu Not Working: From the White Overlay to the Missing Spanish Links

How the failure shows up on a Twenty Twenty-Four site

Start by naming the failure exactly. Six distinct failures turn up on this theme, and each leads to a different fix. Test logged out in a private window on an actual phone, because a narrowed desktop browser hides several of them.

• The three-line icon sits there and ignores every tap.
• The menu opens as a bright white sheet with black text, on a site that is otherwise dark blue or charcoal.
• The open menu lists pages nobody chose, or an old menu from a previous theme.
• Spanish or French pages show the English menu.
• The menu looked right for years, then reverted to a plain list after someone set up a child theme.
• On a tablet the full menu shows, but dropdowns are hard to open with a finger.

The general mobile menu guide handles classic themes and page builders. What follows is specific to Twenty Twenty-Four's header, which is built differently from its successor's.

Reading the header file that draws the menu

Twenty Twenty-Four writes its header straight into parts/header.html rather than pulling in a pattern. Inside a wide Group with the Base background color sit two clusters: a Site Logo at 60 pixels wide next to the Site Title, and on the right a Navigation block laid out horizontally and justified right. The row is allowed to wrap, so on a narrow screen the menu can drop below the logo.

Three details in that Navigation block explain most support questions. It names no overlay visibility value, so WordPress applies the default, Mobile, and core's CSS swaps the links for an icon whenever the screen is under 600 pixels wide. It names no overlay colors, so the open panel falls back to core's defaults. And it names no saved menu, so WordPress decides at render time what links to show.

Seven causes, ordered for a site that has been live a while

The icon is the design, not a fault

With Mobile selected, a phone gets a hamburger whatever the menu length. For a site with four short links, that costs every mobile visitor a tap. Test: drag a desktop window narrower; the switch happens at 600 pixels. If that is the only complaint, change the setting to Off.

A white panel on a dark style variation

Because the theme sets no overlay colors, core paints the open overlay white with black text whenever the Navigation block has no colors of its own. On the default light style nobody notices. On Onyx, whose Base is a near-black #272727, or Maelstrom, a saturated blue, it looks broken. Test: open the menu on a phone with a dark variation active.

A delay setting holding the script back

The open and close behavior is a JavaScript module from core, registered under the handle @wordpress/block-library/navigation/view and driven by the Interactivity API. Plugins that postpone scripts until a user interacts can leave the icon visible and inert. Test: pause the optimizer's script delay, purge, and retry in a private window; then read the browser console for errors.

A menu WordPress picked for you

With no saved menu, the block borrows the newest published Navigation menu, or converts a classic menu left over from a previous theme, or lists every published page. Sites that switched from an older classic theme often meet that old menu again here. Test: select the block in the Site Editor and open its Options menu to see the Menus list.

A child theme activated after the header was edited

Header edits made in the Site Editor are saved against the parent theme. A support thread on this theme documents what happens next: activate a child theme and the customized templates and parts do not come along. Your menu choice and overlay setting revert to the file defaults. Test: Appearance, Themes; is a child theme now active?

A second language the menu ignores

A forum report from a Polylang user says menus placed in templates never switch out of the site's main language; nobody had posted a fix as of October 2026. Translated pages, untranslated menu. Test: load a translated page on a phone and open the menu.

Hover dropdowns on a touch screen

At 600 pixels and above, the full menu shows, which includes most tablets. Submenus set to open on hover are awkward with a finger. Test: try a dropdown on a tablet; if it fights you, set Submenu visibility to Click.

Repairing the header menu, editor first, phone last

1. 1

   Open the original header part

   In Appearance, Editor, open any template, select the Header, and click Edit original. Edits here reach every template that uses the header.

2. 2

   Set the collapse behavior

   Click the Navigation block, then under Overlay in the Settings tab choose Off for a short menu or keep Mobile for a long one.

3. 3

   Color the overlay

   Switch to the block's Styles tab and fill the two overlay swatches (Submenu & overlay background, then Submenu & overlay text) with colors from your variation, for example Base and Contrast.

4. 4

   Choose a named menu

   From the block's Options menu, pick the right menu under Menus, or use Import classic menus once and then tidy the result. Rename it so nobody mistakes it later.

5. 5

   Switch tablet dropdowns to Click

   Under Display, set Submenu visibility to Click and keep Show arrow on, so a tap opens the dropdown instead of the parent page.

6. 6

   Free the script

   Put core's navigation view script and the Interactivity API on the optimizer's exclusion list for delayed and combined JavaScript. Save the header, then purge plugin, host and CDN caches.

7. 7

   Test where visitors are

   A phone and a tablet, logged out, each variation you use, and a translated page if you have them.

Speed side effects matter too. The header menu is the first thing most phone visitors tap, which is why the Twenty Twenty-Four speed guide treats it under Interaction to Next Paint. The metric itself is explained in our INP comparison.

Bilingual sites need a decision, not a setting

There is no checkbox that makes the template menu follow the page language in this theme today. Workarounds exist, such as separate templates per language with their own Navigation blocks, but each one is another template to maintain and another place for menus to drift apart. Before spending on them, decide whether the site's second language is a courtesy or a core market.

If it is a core market, it is a reason to look again at the platform, a point the Twenty Twenty-Four review makes as well. In Athena CMS, Harmonia prepares Spanish versions and checks accessibility, and the menu is part of the build in each language.

A menu that ignores the page's language is not a bug report. It is a platform decision waiting to be made.

A maintenance routine for an aging default theme

• Give every Navigation block a named menu, so new menus never leak into the header.
• Set overlay colors once for each style variation you might use, even if you only use one today.
• Before creating a child theme, save your Site Editor work into files; the Create Block Theme plugin from WordPress.org has a Create Child Theme option for this.
• Retest the phone menu after each WordPress release; the Navigation block's labels and options changed in 7.0 and 7.1.
• Keep a dated note of optimizer exclusions, so the next person does not undo them.

A menu that reverted with a child theme rarely reverts alone. The missing header guide for this theme and the Twenty Twenty-Four layout fixes cover the rest of the damage. If an update triggered it, rolling back a theme update that broke things is the safer first move.

Why an old menu keeps asking for attention

Only the overlay colors trace back to the theme itself, and that is the point. The WordPress project keeps Twenty Twenty-Four current, version 1.6 in August 2026. The menu still depends on core's block, core's breakpoint, your saved records, your optimizer and your language plugin, each changing on its own schedule. Three years of small, sensible additions produce a menu nobody fully owns.

For a writer's site or a small brochure, an afternoon with the steps above settles it. For a business that lives on phone traffic, or one serving two languages, a Next.js build makes the menu a tested component in each language, at a higher up-front cost and with a developer for structural changes. Weigh it in Twenty Twenty-Four vs Next.js and moving Twenty Twenty-Four to Next.js. Other fixes are in the troubleshooting hub. Our theme troubleshooting team will fix the menu, and the theme repair service takes on sites with several problems at once.