Troubleshoot common menu issues

Your WordPress navigation menu helps visitors find content and move through your site. This guide shows you how to troubleshoot and fix the most common menu issues.

How you edit your menu depends on your theme type. Block themes use the Site Editor, while classic and some third-party themes rely on the Customizer. To find the right place, check Appearance in your site’s dashboard:

• If you have Editor under Appearance, you’re using a block theme. Edit your menu through Appearance → Editor.
• If you have Customize under Appearance, you’re using a classic theme. Edit your menu through Appearance → Customize → Menus or Appearance → Menus.

Learn the step-by-step process for editing your site’s menu.

If your navigation menu isn’t visible on your site, a Navigation block may not exist in your theme’s header or footer. Most themes include one by default, but if it’s missing or removed, your menu will not display.

Learn how to add a Navigation block to your site.

If your menu updates across your site but not on your homepage (or one specific page), that page is most likely using a different header. In a block theme, templates like the homepage can use their own header, which may contain a separate Navigation block set to a different menu—so editing the menu elsewhere won’t change it.

To fix this, follow these steps:

1. From your site’s dashboard, go to Appearance → Editor → Templates and open the template used for your homepage.
2. Select the Navigation block in that template’s header.
3. In the block settings sidebar, check which menu it uses and choose the same menu you use on the rest of your site.

Learn more about editing templates and the Navigation block.

When you publish a new page or post, it is not automatically added to your menu. You need to manually add it.

You can add different types of content to your menu:

• Add pages and posts to a menu
• Add categories to a menu
• Add custom links and other content types to a menu

Your menu lists every published page automatically when it uses a Page List block. A site uses this block until you create a menu of your own. Because the list is generated, each new page you publish is added to it, and the individual items have no delete or reorder option.

To choose the items yourself, detach the Page List block. Detaching turns the generated list into individual links you can rename, reorder, and remove, and new pages are no longer added automatically.

To keep the list automatic but show fewer pages, set a parent page in the block settings. The menu then shows only the child pages of the page you choose.

A menu link goes to a 404 error when the menu item holds a fixed copy of the page’s old address instead of tracking the page itself. Changing the page’s link leaves that fixed address pointing at a location that no longer exists.

To fix a broken menu link, edit the individual menu link and search for the page by name in the Link field. Select the page from the results rather than pasting its address.

Selecting the page ties the menu item to the page itself, so the menu item follows any future change to the page’s link. A pasted address stays fixed and breaks again the next time the link changes.

When you first add a Navigation block, it displays your site’s menu. If you haven’t created a custom menu yet, it will automatically include a Page List block that displays all published pages and updates automatically when new pages are published.

If you’re using the Page List block, it will only show your published pages as top-level menu items. Child pages will not appear as drop-down or submenus. To create dropdowns with child pages, detach the page list into individual menu links first.

Learn how to create drop-down menus.

By default, your menu automatically converts to a mobile-friendly hamburger menu (the three-line icon) on smaller screens. You can customize this behavior to show the full menu, adjust the layout, or change when the mobile menu appears.

Common issues include:

• No hamburger icon appears. The Overlay Menu setting is set to Off, which shows the full menu at every screen size. Set it to Mobile to collapse the menu behind the icon on smaller screens. Learn how to change the Overlay Menu setting.
• The menu looks right in the editor but not on your phone. The editing canvas is a working view rather than an exact render of your published site, so check the live site before changing anything else. Learn how to compare the editor with your live site.

Learn how to change your menu’s design for mobile devices.

Note: If you want to display completely different menu content on mobile versus desktop, you’ll need to create two separate menus and use CSS to show/hide them based on screen size. Learn how to hide content on specific devices using CSS. This approach requires some CSS knowledge.

Your menu is as wide as its contents need it to be. The number of items in the menu and the font size of those items set its width, and anything else in your header, such as a site title or logo, shares the remaining space with it.

To change how much room your menu takes up, you can:

• Remove menu items, or group some of them into drop-down menus.
• Change the font size of the menu items.
• Rearrange the elements in your header using Row and Stack blocks.
• Make your header full width to give the menu more room.

To change where the menu items sit inside that width, use the Justification and Orientation settings in the Navigation block’s layout options.