Set up a separate mobile menu

  • menus
  • mobile
  • navigation
  • header
  • site-editing

Updated

To give phones a different menu from desktop, create a second menu under Appearance → Menus and assign it to your theme's mobile menu location. A shorter menu with only the pages people look for on a phone is easier to tap through than a long desktop menu or a big mega menu.

Not every theme has a separate mobile location. If yours doesn't, the main menu is used on every screen size.

Create the mobile menu

  1. Go to Appearance → Menus.
  2. Click create a new menu, name it something like "Mobile", and click Create Menu.
  3. In the panels on the left, check the pages you want (for example About, Services, Contact) and click Add to Menu.
  4. Drag the items into order. Drag an item slightly to the right to put it in a dropdown under the item above.
  5. Under Menu Settings, check the mobile location in Display location.
  6. Click Save Menu.

Open the site on your phone, or narrow your browser window, and open the menu to check it. If you still see the old menu, see Fix WordPress changes not showing on your site.

Keep both menus up to date

The two menus are separate. When you add, rename, or remove a page in the main menu, make the same change in the mobile menu if it belongs there too. A page left out of both menus can still be found through links on your pages and search.

For the basics of editing menus, see Edit WordPress menus.

If your site runs on Dirigible

  • Dirigible has four menu locations: Main Menu, Mobile Menu, Footer Menu, and Utility Menu. Assign your phone menu to Mobile Menu.
  • With nothing assigned to Mobile Menu, the mobile menu shows your Main Menu. You only need a separate menu when phones should see something different.
  • The mobile menu opens as a drawer from the menu icon. Below the links it also shows the header Button, and the cart, login, search, and social icons when they're turned on under Appearance → Customize → Header & Menus → Desktop (Show Cart, Show Login, Show Search, Show Socials).
  • Header & Menus → Mobile sets the Breakpoint (the screen width where the desktop links switch to the menu icon), Drawer Width, Background (Drawer Menu), link colors, and the menu and close icons.
  • A mega menu can go in the mobile menu too: add the same mega menu item to Mobile Menu. On phones, the open panel fills the space under the header and hides the other menu items until it's closed. See Creating a mega menu.

More on the header and drawer: Flexible Headers and Mobile Menus.