Anyone visiting on a phone never sees the menu you arranged so carefully on your laptop. On a phone, the row of links is replaced by a small button, usually three short lines, and the menu opens as a panel or a full-screen overlay when someone taps it. What appears inside that panel, and how it behaves, is decided partly by your theme and partly by settings you can change.
The WordPress mobile menu has fewer settings than people expect, and they sit in different places in block themes, classic themes and page builders. Testing on a real phone matters more than any of them. If the button does nothing at all when tapped, that is a fault rather than a setting, and the troubleshooting section near the end points you to the fix.
How a theme decides when to switch
WordPress itself has no single “mobile menu” setting. The theme’s stylesheet tells the browser to hide the full menu below a certain screen width and show the button instead. That width is called a breakpoint.
- In most classic themes the breakpoint is fixed in the theme. A few themes let you change it in the Customizer.
- In block themes, the Navigation block uses its own fixed breakpoint, set by WordPress rather than by you.
- Page builders such as Elementor have their own breakpoints, and the menu widget usually lets you choose at which of them the button takes over.
A side effect: on a tablet, or a laptop with a narrow browser window, you may see either version depending on the exact width. That is normal.
The WordPress mobile menu in block themes
Block themes build the header menu from a Navigation block, and what it does on small screens is controlled by its overlay menu setting.
- In Appearance → Editor, click into the header area and pick the Navigation block; List View helps if it is hard to click.
- In the block settings on the right, find the overlay setting, labelled Overlay Visibility in recent versions and Overlay Menu in older ones. It has three choices: Mobile (button on small screens, full menu on wide ones), Always (button on every screen size) and Off (never collapse).
- Leave it on Mobile for a normal business site. Choose Off only if the menu is very short, two or three items, and still fits on a narrow phone.
- Below it, recent versions offer options for the button, such as showing an icon or the word Menu, and a choice of icon.
- Check the colours. The overlay has its own text and background colours in the block’s Styles settings; if they match the page badly, the open menu can be hard to read.
- Save, then test on a phone.
Submenus behave differently inside the overlay. They are usually shown expanded, as an indented list, rather than as pop-out drop-downs. How deep to nest items, and how that looks on a phone, is covered in our guide to dropdown menus and submenus.
Classic themes and page builder headers
Classic themes handle the mobile menu in their own code, so the options depend on the theme. If you cannot tell whether your header comes from the theme or from a builder, the WordPress header and menu guide sorts that out first.
- Look for a mobile section in the Customizer. Under Appearance → Customize, open the Header panel. Themes with a header builder often have a separate mobile header layout, where you choose what appears in the bar and in the menu panel.
- Check for a separate mobile menu location. Under Appearance → Menus, open Manage Locations. Some themes offer a Mobile or Off-canvas location. If it exists and is empty, phones may show nothing; if it holds a different menu, phones show that one.
- Page builder headers ignore the theme’s settings. In Elementor, for example, the menu widget’s layout settings include the point at which the toggle button appears and how the opened menu looks. Edit them in the builder’s header template.
A separate mobile menu can be useful. It lets you give phone visitors a shorter list, with Call or Book at the top. The cost is that you now have two menus to keep in step, and owners regularly update one and forget the other.
Too many items
A menu that looks tidy as a single row on a wide screen can become a long scrolling list on a phone, with every submenu item underneath. Visitors then have to scroll a menu before they can scroll the page.
A few ways to shorten it:
- Group similar pages under one parent. Five separate service pages can become one Services item that leads to a services overview page.
- Move legal and admin pages, such as privacy policy and terms, to the footer.
- Keep the label of each item short. Long labels wrap to two lines in a narrow panel.
- Put the one action you most want, such as a phone number or a booking button, in the header bar itself rather than inside the menu, so it is visible without opening anything. Our guide to putting a phone number in the header shows how.
If you have to scroll inside the open menu on your own phone to reach the last item, it is doing too much. Pruning it often turns up pages nobody needs any more, which is worth following up with the content review in our guide to managing your WordPress site.
Test it on a real phone
The Customizer’s device buttons, the Site Editor’s preview and a narrowed desktop browser are useful while you edit. They are not the same as a phone, which has a touch screen, a different browser and sometimes a different cached copy of the page. Before calling the menu finished, go through this on an actual phone:
- Open the site in a private tab so you are not logged in and not seeing an old copy.
- Tap the menu button. It should open on the first tap, not the second.
- Tap every item, including submenu items, and check each goes where it should.
- Check that the close button is easy to find and works, and that the menu also closes after you choose an item that jumps to a section of the same page.
- Open the menu at the bottom of a long page. It should still appear at the top of the screen and be scrollable.
- Turn the phone sideways and repeat the first two steps. A phone held sideways is sometimes wide enough to get the desktop menu, squeezed.
- If you can, try one iPhone and one Android phone. They use different browsers and occasionally behave differently.
If you changed something and the phone still shows the old menu, a cache is the likely reason. See why WordPress changes are not showing for the caches to clear and in what order.
When the button does nothing
The menu button depends on JavaScript. If a script on the page has an error, or an optimisation plugin delays scripts until the visitor interacts, the first tap may be swallowed or nothing may happen at all. If the button appears but no menu opens, or the menu shows on desktop but not on phones, follow the checks in our guide to a missing WordPress menu. Layout problems that go beyond the menu, such as text running off the screen, are a wider mobile display issue rather than a menu setting.
Small choices that help
- Icon or the word “Menu”. Most people recognise the three-line hamburger icon, but some older visitors do not. If your customers skew older, showing the word Menu next to the icon, or instead of it, removes the doubt.
- Tap target size. Menu items close together on a small screen get mis-tapped. Most themes space them well; if yours does not, a little extra padding in the theme’s menu settings helps.
- Contrast in the overlay. Light grey text on white is hard to read outdoors. Use strong contrast.
Frequently asked questions
Can I show a different menu on phones than on desktop?
Only if your theme or page builder supports it. Some classic themes have a separate mobile menu location, and builders let you place a different menu widget in the mobile header. The core Navigation block in block themes shows the same menu on every screen, collapsed into the overlay on small ones.
Why does my phone show the desktop menu squeezed onto two lines?
The screen is just wider than your theme’s breakpoint, which often happens with a phone held sideways or a large phone. Shorter labels or fewer top-level items usually solve it. Some themes let you raise the breakpoint in the Customizer, so the button appears on slightly wider screens.
Can I change where the mobile menu button sits in the header?
In themes with a header builder, you can usually drag the toggle button to the left or right in the mobile header layout. In a block theme, its position follows the Navigation block, so moving that block within the header Row, or changing the row’s justification, moves the button.
Should the mobile menu open as a full screen or as a side panel?
Either works if it is easy to close and easy to read. The core Navigation block opens a full-screen overlay. Many classic themes and builders offer a slide-in panel or a drop-down below the header. Pick the one where your longest menu fits without much scrolling.
When the button does nothing, items disappear only on phones, or the menu opens behind other content, the cause is usually a script or theme conflict. We can trace it and explain the cause in plain words; fixing a WordPress bug like this is priced at ₹1,499 per incident onwards.
Next in this series: How to Remove the Sidebar in WordPress (or Add One)
