Your WordPress mobile menu is the menu visitors get on phones and tablets, usually behind a hamburger icon (☰). Which links it shows and how it looks depend on your theme, so the place you edit it depends on your theme too. This guide covers where to edit the mobile menu in classic themes, block themes and theme header builders. It also covers how to show a different menu on phones, how to fix submenus that won’t open, and how to customize the menu fully with a plugin.
Quick answer
- Classic theme: go to Appearance → Menus, edit the menu assigned to your header (or to a “Mobile” location if your theme has one), then save.
- Block theme (for example Twenty Twenty-Five): go to Appearance → Editor → Navigation to change the links. Select the Navigation block in your header to set when the mobile overlay menu appears.
- Theme with a header builder (for example Astra, Kadence or GeneratePress): open Appearance → Customize, switch the preview to mobile, and edit the mobile header there.
- Want full control over the mobile menu’s design, animation and behaviour? Use a mobile menu plugin such as Responsive Menu (steps below).
How to edit the mobile menu in a classic theme
In a classic theme, the mobile menu is normally the same WordPress menu as your desktop menu, shown in a different layout on small screens. To change its links:
- Go to Appearance → Menus.
- Pick the menu from Select a menu to edit. Under Menu Settings → Display location, check which location it’s assigned to.
- Add, remove or drag items. Drag an item slightly to the right to make it a submenu item.
- Click Save Menu, then check the result on a phone or in your browser’s device view.
If your theme lists a separate location such as “Mobile Menu”, assign a different menu there to show different links on phones. If there’s no such location, the same menu is used everywhere. See showing a different menu on mobile below.
You can make the same changes under Appearance → Customize → Menus, which shows a live preview. Use the device buttons at the bottom of the Customizer to preview the phone layout.
How to edit the mobile menu in a block theme
Block themes such as Twenty Twenty-Four and Twenty Twenty-Five use the Navigation block instead of the Menus screen. The same block powers both the desktop menu and the mobile menu.
- Go to Appearance → Editor → Navigation and open your menu to add, remove or reorder links.
- To change how the menu behaves on phones, open the Header template part in the Site Editor and select the Navigation block.
- In the block settings, Overlay Menu controls the mobile menu: Mobile shows the hamburger icon on small screens, Always uses it on every screen, and Off never collapses the menu.
- Under the same settings, you can choose whether submenus open on click and whether to show arrows next to parent items.
- Click Save.
The overlay menu’s colours come from the block’s color settings. Beyond that, a block theme gives you little control over the mobile menu’s layout or animation, which is where a plugin helps.
Themes with a header builder
Many popular themes, including Astra, Kadence and GeneratePress, have their own header settings in the Customizer. These often include a separate mobile header with its own menu, breakpoint and hamburger style. Open Appearance → Customize, switch the preview to mobile, and look for a Header or Mobile Header section. Your theme’s documentation lists the exact options.
How to show a different menu on mobile
A shorter menu often works better on phones: fewer top-level items, your main call to action, and a tap-to-call link. You have three ways to do it:
- Your theme has a mobile menu location: create a second menu under Appearance → Menus and assign it to that location.
- Your theme doesn’t: the free Responsive Menu plugin shows any WordPress menu you choose as the mobile menu and hides your theme’s menu on small screens. Your desktop menu stays as it is.
- Different menus for phones and tablets: Responsive Menu Pro can show one menu on phones and another on tablets.
Mobile submenus not expanding? How to fix it
Submenus that won’t open on phones are one of the most common mobile menu problems. Work through these causes in order:
| Cause | How to check | Fix |
|---|---|---|
| The theme opens submenus on hover | Submenus open with a mouse but not with a tap | Use a theme or plugin that adds a tap toggle (an arrow button) next to parent items. In block themes, turn on “open on click”. |
| JavaScript is delayed or deferred | The first tap does nothing, or menus only work after you scroll or wait | In your performance plugin (for example WP Rocket’s “Delay JavaScript execution”), exclude your theme’s or menu plugin’s script. We hit exactly this on our own site. |
| A JavaScript error stops the menu script | Open your browser’s developer tools and look for red errors in the Console | Deactivate plugins one at a time to find the conflict, then update or replace it. |
| The page is cached with old files | It works when you’re logged in but not in a private window | Clear your caching plugin, server and CDN caches. |
| The parent item’s link is “#” | Tapping the parent jumps to the top of the page | Use a menu that has a separate toggle for submenus, or add the parent page as the first child item. |
| CSS hides the submenu | The submenu opens but is cut off or invisible | Look for overflow: hidden or a fixed height on the menu container and remove it. |
If the whole menu is missing rather than just the submenus, see WordPress menu not showing? How to fix it.
How to customize your mobile menu with Responsive Menu
When your theme’s options aren’t enough, Responsive Menu replaces the theme’s mobile menu with one you control from a live editor. It’s free on WordPress.org, has more than 70,000 active installs, is rated 4.5 out of 5, and works with any theme.
1. Install and create a menu
Go to Plugins → Add New, search for “Responsive Menu”, then install and activate it. Go to Responsive Menu → Menus and create a new menu. The setup asks which WordPress menu to use, which devices to show it on, and the CSS selector of your theme’s menu so it can hide the old one.
2. Set the breakpoint
The breakpoint is the screen width where the mobile menu takes over. By default, it’s 1024px, which covers phones and most tablets. Change it to match where your theme’s desktop menu starts to wrap or overflow.
3. Choose how the menu opens
Pick Slide (the menu slides over the page) or Push (it pushes the page aside), and the direction it comes from: left, right, top or bottom. Set the menu width as a percentage. At 100%, the menu covers the whole screen.
4. Style the hamburger button
Set the button’s size, colours (normal, hover and open), position and line thickness. Add a text label such as “Menu” next to the icon if your visitors might not recognise the hamburger icon. The free plugin has one open/close animation. Pro adds 26 more: you can try them all on the hamburger menu animations page.
5. Set up submenus
Each parent item gets a tap toggle, so submenus work on touch screens. You can also:
- Use accordion: opening one submenu closes the others.
- Auto expand all submenus: show every child item from the start (good for short menus).
- Auto expand current submenus: open only the section the visitor is in.
6. Add extras to the menu panel
The panel can hold more than links: a title or logo, a search box, social icons and your own HTML (for example a phone number or opening hours). Drag them into the order you want. You can also show menu items only to logged-in users, only to guests, or only to the user roles you pick.
Responsive Menu Pro adds button animations, Font Awesome icons on menu items, a header bar, scroll lock with a page overlay, touch gestures, different menus for phones and tablets, and a desktop mega menu that also works on phones. Store owners can add a WooCommerce cart to the menu. See all features.
Mobile menu vs desktop menu
| Aspect | Desktop menu | Mobile menu |
|---|---|---|
| How it opens | Always visible in the header | Behind a hamburger button |
| Submenus | Open on hover or click | Open with a tap toggle |
| Layout | Horizontal bar | Vertical list in a panel |
| Tap targets | Can be smaller (mouse precision) | Need to be large enough for a finger |
| Closing | Move the mouse away | Close button, Escape key, or tap outside |
Mobile menu accessibility checklist
An accessible mobile menu works for people using keyboards, screen readers and switch devices. For many online shops in the EU, it’s also part of the European Accessibility Act. Check these five things:
- The toggle is a real button. It should be a
<button>with an accessible name (such as “Menu”) andaria-expandedthat changes from “false” to “true” when the menu opens. - Keyboard focus stays in the open menu. Tab moves through the menu items and loops back, instead of jumping to the page behind it.
- Escape closes the menu, and focus returns to the menu button.
- Text has enough contrast: at least 4.5:1 against its background (WCAG AA). Check your colours with a contrast checker.
- Tap targets are big enough: WCAG 2.2 asks for at least 24×24 pixels (AA). 44×44 pixels, the AAA level and Apple’s guideline, is more comfortable on a phone.
Responsive Menu handles the first three (see how we tested it): the toggle is a button with aria-expanded, focus loops inside the open menu, and Escape closes it and returns focus to the button. You choose the colours and sizes, so checking contrast and tap target size is up to you.
Frequently asked questions
How do I edit the mobile menu in WordPress?
In a classic theme, go to Appearance → Menus and edit the menu assigned to your header (or to a mobile location, if your theme has one). In a block theme, go to Appearance → Editor → Navigation. If your theme has a header builder, edit the mobile header in Appearance → Customize with the preview set to mobile.
Can I edit the mobile menu without a plugin?
Yes, you can change the links and, depending on your theme, some styling. A plugin is only needed when you want control your theme doesn’t give you, such as a different menu on phones, a custom slide-in panel, button animations or extra content in the menu.
Why are my mobile submenus not opening?
Usually because the theme opens submenus on hover, which doesn’t exist on touch screens. Other common causes are delayed JavaScript from a performance plugin, a JavaScript error from another plugin, or an outdated cached page. The troubleshooting table above walks through each one.
How do I change the hamburger menu icon?
Some themes let you change the icon’s colour and size in the Customizer. With Responsive Menu, you can change its size, colours, position, line thickness and spacing, and add a text label. Pro adds 26 animated styles. For a step-by-step guide, see how to change the hamburger menu icon animation.
Should the mobile menu show the same links as the desktop menu?
Not necessarily. Phone visitors usually want fewer choices: your most important pages, your main call to action, and quick contact options such as tap-to-call. Create a separate WordPress menu for mobile and assign it to your theme’s mobile location, or choose it in Responsive Menu.
How do I test my WordPress mobile menu?
Use your browser’s device view (in Chrome, open DevTools and toggle the device toolbar) at common widths such as 375px, 390px, 412px and 768px. Then test on a real phone, because taps behave differently from mouse clicks. Finally, try opening and closing the menu with a keyboard and with VoiceOver (iOS) or TalkBack (Android).