Most WordPress mobile menus look fine until you check them on your phone. Links are crammed together, the hamburger icon doesn’t open, or you’re showing a 10-item desktop menu on a small screen.
In this guide, I’ll show you how to fix that. You’ll learn how to enable the hamburger icon, control what shows on mobile, and set up a separate menu for small screens. I also cover the most common mobile menu problems.
How to Edit Mobile Menu in WordPress
Need to change which links appear in your menu? See how to edit your WordPress menu. Want to change your menu’s style or colors? See how to customize your WordPress menu.
The first method in this guide uses SeedProd for full visual control (SeedProd Pro required). The second uses the free Responsive Menu plugin. Click below to jump to your method:
Customize Mobile Menus with SeedProd Website Builder
I use SeedProd on my own site, and the mobile visibility controls are one of the features I rely on most. To kick things off, I’ll show you how to use SeedProd to customize and edit mobile menus visually, without code.
It comes with hundreds of pre-made templates, a drag-and-drop interface, and countless design elements to make customizing any WordPress page effortless. Whether your menu is in your header, footer, or WordPress sidebar, you can edit it easily with SeedProd’s builder.
Moreover, this plugin’s powerful visibility options allow you to hide specific design elements on mobile or desktop screens. As a result, you can tailor your navigation menus to different screen sizes.
Step 1. Install and Activate SeedProd
To get started, you’ll need to download the plugin from SeedProd’s website. Even though SeedProd has a free version, we’ll use SeedProd Pro for its WordPress theme-building features.
Note: SeedProd Pro is required for the Theme Builder. When you activate the SeedProd theme, it replaces your current active theme. You can switch back at any time from the Theme Builder dashboard.
If you need help, you can see this guide on installing a WordPress plugin.
After activation, head over to SeedProd » Settings, where you can enter your plugin license key. You’ll find this information in the Downloads section in your SeedProd account dashboard.
Paste your key into the blank field and click the Verify Key button to store your license.
Step 2. Choose a Premade Template
Next, you’ll need to choose a pre-made design to use as a starting point. You can either build a whole new WordPress theme from scratch with the Theme Builder or create individual pages with the landing page builder.
For this guide, we’ll use the Theme Builder, but if you prefer to make a landing page, you can follow this guide on how to create a landing page in WordPress.
To choose a pre-made design for your WordPress theme, navigate to SeedProd » Theme Builder from your WordPress dashboard and click the Theme Template Kits button.
This will open SeedProd’s library of premade website templates you can install with 1 click.
Simply scroll through the designs until you find a template you like, then click the checkmark icon to import it.
Once you import your website kit, you’ll see all the template parts of your theme in a list like this:
These are the individual templates that make up your complete theme, and you can customize each of them with SeedProd’s drag-and-drop page builder.
We’ll show you how to do that next! It’s super-easy and won’t require writing any HTML, Jquery, or custom CSS code.
Step 3. Customize the Header Template
Since the WordPress menu we want to edit is in the header, scroll through your template parts until you find the header template. Then, hover over it and click the ‘Edit Design’ link.
When it opens, you’ll see a layout with a live preview of your header on the right and WordPress blocks on the left. You can drag any block over to the preview to add new elements to your page easily.
Clicking elements in your header lets you see their settings in the left-hand sidebar. For example, selecting the logo will open options to change the logo image and its size, alignment, and link.
Similarly, clicking the Nav Menu block will show different menu settings.
For instance, the block lets you choose between a ‘Simple’ or ‘WordPress Menu.’
The Simple option lets you add new menu items inside the page builder interface. You can add links to any page, post, category, tag, or external web page.
Because this is a simple approach to menu building, you can’t add dropdown menus, choose custom menus you’ve already made, or assign a custom mobile menu.
However, you can customize the menu alignment, font size, spacing, and divider. Plus, in the Advanced tab, you can choose between horizontal and vertical menus and customize the typography, background colors, borders, CSS classes, and more.
The WordPress Menu option has a different approach. You can choose existing menu locations from the dropdown and activate the mobile navigation menu toggle for small screen sizes.
When you activate this setting and switch to the mobile view, you’ll see that your mobile menu has a hamburger icon instead of standard menu links, which is much better for the mobile user experience.
It also has a link to the default WordPress menu page to edit your menu layout. Like the Simple menu, the Advanced tab has customization and animation options, and unlike the simple menu, you can customize your sub-menu styling options.
Step 4. Edit Your Header Visibility Settings
So far, you know how to edit your main menu and activate a hamburger menu for mobile screens. But what if there are elements in your header that you don’t want to display on smaller screens?
The good news is you can edit the visibility settings for every page element and choose what displays on different screen sizes.
Let’s say you want to hide your header’s call to action (CTA) on mobile devices because it hurts the user experience. In that case, you can go to that block’s Advanced settings tab and turn on the ‘Hide on Mobile’ toggle in the Device Visibility menu.
When you preview your header in mobile view, you’ll see it’s grayed out, which means the button won’t be visible to mobile visitors.
Continue customizing your mobile menu options until you’re happy with how everything looks. Then, go ahead and click the Save button to save your changes.
Step 5. Continue Customizing Your WordPress Theme
Once your mobile menu is working, use SeedProd’s builder to customize the rest of your theme. You can edit your footer, homepage, and any other template part from the same dashboard.
Step 6. Publish Your Changes
When you’re ready to make your changes live on your WordPress site, head back to the SeedProd theme builder dashboard and look for the toggle called ‘Enable SeedProd Theme.’ Simply switch this toggle to the ‘Yes’ position to activate your SeedProd theme.
Now you can visit your website and see your mobile menu in action.
Alternative: Edit Mobile Menus with a Free WordPress Plugin
Another way to edit your mobile menus is by using a WordPress menu plugin. For example, with the plugin we’ll use next, you can make a hamburger menu that slides out on mobile screens.
First, you’ll need to download, install, and activate the Responsive Menu WordPress plugin.
Once the plugin is activated, you’ll see a new label called ‘Responsive Menu’ in your WordPress admin bar. Clicking it will take you to the menu screen to add a new responsive menu.
So go ahead and click the Create New Menu button. You’ll see a popup with different menu themes to choose from, including default, Electric Blue, Full-Width, and more.
Choose a theme you like, then click the Next button.
You can now enter a name for your menu, choose an existing WordPress menu to display, and click the Create Menu button.
Now, you’ll see a visual interface where you can edit your responsive menu options. You can show and hide different elements and change the mobile responsive minimum screen width and max width.
The responsive menu plugin has many other mobile menu options to change the behavior and appearance of your menu. You can explore them on this page and adjust them as needed.
Don’t forget to click the ‘Update’ button to store your settings
From there, you can visit your website to see the responsive menu in action.
How to Show a Different Menu on Mobile
Mobile phones now account for nearly 60% of global web traffic, yet most WordPress sites show the same menu on every device. You can display a shorter, simpler menu on mobile while keeping the full menu on desktop.
I find this really useful when a desktop menu has too many items to work on a small screen.
Option 1: Use your theme’s mobile menu location.
Some themes support a separate menu location just for mobile.
Go to Appearance » Menus, create a simplified second menu, and assign it to the mobile location under Menu Settings » Display Location. See how to edit your WordPress menu for the full step-by-step walkthrough.
Option 2: Use SeedProd’s device visibility.
In the SeedProd Theme Builder, open your header and add two Nav Menu blocks.
Set one to show on desktop only and one to show on mobile only. Each block can display a different WordPress menu, giving you independent control per device.
To set this up, click the Nav Menu block, go to the Advanced tab, and use the Device Visibility setting. I covered this in Step 4 above. It takes about two minutes to configure once your second menu is created.
Option 3: Use the Responsive Menu plugin. The free Responsive Menu plugin (covered in the Alternative method above) creates a mobile-only menu that only appears on small screens. Your existing desktop menu stays untouched.
Troubleshooting Common Mobile Menu Problems
I get a lot of questions about mobile menus that aren’t working right. Here are the most common problems and how to fix them.
Hamburger icon not responding on iOS. A caching plugin is usually the cause. Clear your cache in W3 Total Cache, WP Rocket, or whichever plugin you use, then test on your phone again.
Mobile submenu not opening. This is almost always a JavaScript conflict with your theme. Try switching to a default WordPress theme temporarily. If the submenu works, the issue is in your theme’s JS files.
Menu changes not showing after you save. Your caching plugin is serving the old page version. Purge the cache and do a hard refresh in your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac).
Menu breaks after a theme update. Theme updates sometimes reset menu location assignments. Go to Appearance » Menus, open the Menu Settings panel, and re-assign your menu to the correct display location.
FAQs on Editing Mobile Menus in WordPress
I hope this guide has helped you learn how to edit mobile menus in WordPress. Here are a few other tutorials you may also find helpful, including the following:
- How to Add a Custom Alert Message to WordPress
- Best WordPress Plugins: Top 25 Must-Have Tools
- How to Create an Author Site in WordPress Without Coding
Thanks for reading! We’d love to hear your thoughts, so please feel free to join the conversation on YouTube, X and Facebook for more helpful advice and content to grow your business.
