The core Navigation block shows a hamburger "overlay" menu on phones, which is fine for short menus. For longer menus it falls short: submenus show fully expanded, styling is limited and there's no bottom bar. The fix is to keep the Navigation block for desktop, hide it on phones, and show a dedicated mobile menu built from the same menu — MenuVerse does this free on block themes.
What the Navigation block does on mobile
In a block theme, your header usually contains a Navigation block. Select it and look at Overlay Menu:
- Mobile (default) — a hamburger icon on small screens that opens a full-screen overlay.
- Always — the hamburger on every screen size.
- Off — the menu items always show inline, even on phones.
You can set the overlay's background and text colours, and choose the icon style. For a menu of four or five links, that's often all you need.
Where it falls short
Expanded submenus. In the overlay, submenus are shown open, one under another. A menu with three dropdowns of six items becomes a long scroll before visitors find what they want.
Limited design control. The overlay is a full-screen panel. There's no slide-in drawer from the side, little control over spacing and typography beyond your theme's settings, and no logo bar at the top of the panel.
No bottom navigation. Phone users expect the main actions — Shop, Search, Cart, Account — at the bottom of the screen. The Navigation block only offers the top-of-page hamburger.
Menus are hard to find. On block themes, WordPress hides Appearance → Menus, so many site owners can't find where their menu lives. See Appearance → Menus missing?
The fix: a dedicated mobile menu from the same menu
MenuVerse adds a proper mobile menu and an app-style bottom bar that read the same block Navigation menus WordPress already stores, so there's still only one menu to edit.
1. Add the MenuVerse mobile menu
- Install and activate MenuVerse.
- Open MenuVerse in the dashboard and enable Mobile Menu. Choose your existing Navigation menu.
- Pick the side it slides in from, the trigger icon and an optional top bar with your logo. The phone preview shows each change.
- Place it: open Appearance → Editor, edit your Header template part and insert the MenuVerse block next to (or instead of) the Navigation block. You can also use the shortcode, a PHP template tag, or MenuVerse's optional automatic insertion.
The free mobile menu has accordion submenus that stay closed until tapped (and open at the branch the visitor is already on), body scroll lock, a focus trap and focus return for keyboard and screen-reader users, and a configurable breakpoint.
2. Hide the Navigation block on phones
Core WordPress doesn't let you hide a block on one device. Two options:
- No code: ExtenderX's free Visibility Control extension adds show/hide on desktop, tablet and mobile to every block. Select the Navigation block and hide it on mobile.
- Pro: MenuVerse Pro can hide your theme's own menu on small screens for you.
You might also set the Navigation block's Overlay Menu to Off, so it never renders its own hamburger.
3. Add a bottom bar (optional)
Enable MenuVerse's Bottom Menu for four thumb-reach buttons — for example Home, Search, Shop and Contact — with a More drawer for the rest. Search buttons can open a search sheet scoped to the site or to WooCommerce products. See how to add a mobile bottom navigation bar.
Before and after
| Navigation block overlay | MenuVerse | |
|---|---|---|
| Hamburger on mobile | Yes | Yes |
| Submenus | Expanded | Accordion, opens at current branch |
| Panel style | Full-screen overlay | Side drawer (left or right); full screen and push in Pro |
| Logo in the panel | — | Top bar with logo or site title |
| Bottom navigation bar | — | Free |
| Scroll lock and focus trap | Basic | Scroll lock, focus trap and focus return |
| Uses your existing menu | Yes | Yes (classic and block menus) |
| Weight | Part of core | Under 6 KB gzipped per module |
Tips for a better mobile menu
- Five to seven top-level items. Move the rest into submenus or the footer.
- Put the action first. "Book", "Shop" or "Call" belongs in the bottom bar, not the bottom of a long list.
- Test with a keyboard. Tab to the menu button, open it, Tab through the items, press Escape. Focus should never escape behind the menu.
- Test on a real phone, with your longest menu.
For other mobile menu plugins, see the mobile menu plugin comparison.