Until now, the mobile navigation overlay, the full-screen menu that appears when a visitor taps the hamburger icon on a mobile device, was essentially a black box. WordPress displayed a fixed default overlay and gave you little say in how it looked or behaved. If you wanted to style it differently, match it to your brand, or add anything beyond a basic link list, you were reaching for custom code or a third-party plugin.
That gap is now closed.
WordPress 7.0 introduces navigation overlays as editable template parts. You can design them directly in the Site Editor, style them however you like, and save them as reusable parts of your theme. The Navigation block’s sidebar even shows a live preview of the overlay you’ve selected. No switching screens to check your work.
What You Can Do With It
The short answer: a lot more than before.
You can add branding, imagery, calls-to-action, custom typography, and background colors directly to your mobile menu. WordPress 7.0 ships with several built-in starter patterns to help you get started quickly. From there, it’s a blank canvas.
To get going, look for the Create overlay button in the Navigation block sidebar. It walks you through the setup and lets you choose a starting pattern. You can also manage all your overlay template parts under Appearance → Editor → Patterns → Template Parts.
Why It Matters
The mobile menu is often the primary navigation experience for a significant chunk of your visitors. On most sites, more than half of traffic is mobile and that overlay is what those visitors interact with every time they want to find something.
For a long time, it was one of the few corners of a block theme that the Site Editor couldn’t reach. Now it can. That means your mobile menu can finally feel like a deliberate design decision rather than a default you’re stuck with.
Small change on paper. Real difference in practice.
