The main menu on my WordPress site appears as an icon on smaller devices. How do I control that?

My site displays a text menu across the top of the page when you view it in a desktop browser. But when you look at the site on a smart phone or a tablet, the menu is replaced by an icon with three stacked lines. When you tap this icon, the menu appears vertically. How do I control when the standard menu appears and when this mobile menu icon appears?

Control how the main menu appears in your theme, and add features

This is typically controlled by your theme’s Appearance settings. Try this, from the WordPress dashboard for your site (log in as an admin, of course):

Appearance : Customize : Theme Settings : Navigation

Look for a Mobile Menu check box. If it’s checked, uncheck it. You can also tweak this setting. If you leave the mobile menu on, under Mobile Menu Collapse, you can set:

The resolution when the menu collapses into a mobile navigation menu. Value is in pixels.

In other words, if you set this to, let’s say, 480, the mobile menu will appear only when the browser window, or the size of the smartphone screen, is 480 pixels wide or smaller.

Be sure to click the Publish button to save any changes you make. On larger screens, you can see how the updated page will look in the preview on the right side.

Note that the mobile menu is a feature, not a bug: it’s designed to appear on smaller screens so you don’t need to use a lot of screen space for a complex menu structure, but the full menu is just one tap away.

Scroll to Top