How to create responsive menus in WordPress

Check whether your site uses a block theme or a classic theme. With a block theme, open Appearance > Editor and edit the Navigation block in the header or template part. With a classic theme, use Appearance > Menus when that screen is available. WordPress 6.0 and later generally manage navigation through the Navigation block on block themes, while the classic Menus screen remains mainly for classic and hybrid themes.

The editor you see matters because the responsive controls are not in the same place. A classic menu editor organises links, but the theme normally supplies the hamburger button, mobile layout and front-end behaviour.

Add the main pages first, then add categories, posts or custom links only where they help visitors. Keep labels short and place related links under a parent item to create submenus. In a classic theme, drag items slightly to the right to make them children; in the Navigation block, use the block controls to create submenu items.

Save the menu or site changes before previewing it. Do not rely on automatically added pages for an important navigation: new top-level pages may appear unexpectedly, and child pages normally need to be arranged manually.

In the Navigation block settings, find the overlay or mobile display option and choose Mobile if you want the full menu on desktop but a menu icon on smaller screens. You can choose whether the button uses an icon or text such as “Menu” and “Close”, and you can set submenu items to open on click rather than hover. WordPress documents these controls under the Navigation block’s display and overlay settings.

With a classic theme, look in the Customizer, theme options or header settings for a mobile menu, breakpoint or menu toggle setting. If the theme only outputs a desktop menu, WordPress does not add a responsive hamburger interface automatically. You then need a developer to add the accessible toggle and supporting CSS and JavaScript, or use a plugin.

The no-plugin route is fine when your block theme already provides the Navigation block overlay, or when your classic theme includes a working mobile menu. You can adjust colours, spacing, typography and some layout settings in the editor or Customizer, and add small visual changes through the site’s additional CSS area.

Do not hide the desktop menu with CSS and assume that creates a mobile menu. A usable mobile navigation needs a visible control, keyboard access, focus handling, submenu behaviour and a way to close the overlay. Hand-built CSS alone cannot provide those interactions, so custom development becomes the drawback of the manual route.

Preview the menu at desktop, tablet and phone widths. Tap the menu button, open every submenu, follow a link, close the overlay and rotate the phone. Then test with a keyboard: the menu button should be reachable, its state should be clear, and focus should not disappear behind the open panel.

Check long labels, three-level menus, the logo beside the button, sticky headers and landscape phone widths. A common Friday failure is a hamburger icon that appears but does nothing because a JavaScript optimisation, cookie banner or other plugin is interfering. Disable plugins one at a time in a staging copy to isolate conflicts, then clear caches and retest.

If your theme has no mobile toggle, or you need several layouts and breakpoint controls without writing front-end code, a responsive menu plugin is the quicker option. Superfly Menu provides drag-and-drop menu arrangement, vertical and horizontal layouts, icons, animations, custom links and settings for responsive behaviour.

Install it from Plugins, activate it, select or create the menu you want to display, then configure its layout, colours, toggle button and breakpoints. Preview the result on real phones and check that the plugin is not displaying a second menu alongside the theme’s original navigation.