Do you want to hide a mobile menu in WordPress?
Most WordPress themes automatically turn your default navigation menus into mobile-friendly menus. However, you may want to show a different menu to people who visit your site using smartphones or tablets.
In this article, we will show you how to easily hide the default mobile menu in WordPress, so you can show a custom menu instead.
Method 1. Hide a Mobile Menu in WordPress using a Plugin
The easiest way to hide the mobile menu provided by your WordPress theme is by using WP Mobile Menu. This plugin allows you to create a unique menu and then show it to mobile users. You can also hide the mobile menu that many themes provide by default.
First, you need to create the navigation menu that you want to show on mobile devices. To get started, head over to the Appearance » Menus page in your WordPress dashboard.
On the next screen, type in a name for the menu. It’s a good idea to use something that will help you identify the menu later, such as ‘Mobile Menu.’
After that, you can select all the posts and pages you want to add to the mobile menu.
For detailed instructions, please see our guide to creating a navigation menu in WordPress.
When you’re happy with how the menu is set up, don’t forget to click on the Save Menu button to store your changes.
With that done, it’s time to install and activate the WP Mobile Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, head over to Mobile Menu Options to configure the plugin settings.
Here, scroll to the bottom of the page and choose whether to show the mobile menu on the left or right-hand side of the screen using the ‘Enable Left/Right Menu’ toggles.
Next, open the ‘Choose one menu’ dropdown and select the mobile menu you created earlier.
After that, click on ‘Save Changes.’
There are lots of ways to fine-tune how the mobile menu looks. For example, you can select ‘Font Options’ and then change the font weight, spacing, font size, and more.
You can also select ‘Header Style’ and change how the mobile header looks and acts.
For example, you can add a shadow, change the header height, create a sticky navigation menu, and more.
Most of these settings are straightforward, so you can look through them and see what different kinds of effects you can create.
When you’re happy with how the mobile menu is set up, click on ‘Save Changes.’
Now you’ve set up the plugin, the next step is telling WordPress to show the mobile menu in one of the new locations added by the plugin.
Simply, go to the Appearance » Menus page. If it isn’t already selected, then open the ‘Select a menu to edit’ dropdown and choose the mobile menu you created earlier.
Then, under ‘Menu Settings’ select either ‘Left Mobile Menu’ or ‘Right Mobile Menu’ depending on where you want to show the menu.
After that, simply click on ‘Save Menu.’
Now, either visit your website on a mobile device or view the mobile version of your WordPress site from desktop. You should see the custom mobile menu.
By default, the plugin automatically hides menu elements used by most popular WordPress themes. This means that your theme’s default mobile menu should be hidden without you needing to do anything.
However, if the default mobile menu is still appearing, then you’ll need to go to Mobile Menu Options » Visibility Options in the WordPress dashboard.
Here, use the ‘Find Element’ button to point to your theme’s navigation menu. After that, don’t forget to click on the ‘Save Changes’ button to make your changes live.
Method 2. Hide Mobile Menu using CSS Code
This method is a bit advanced and requires you to add custom code to your website.
For this method, you can choose between two different approaches. You can hide the entire default mobile menu using CSS, or you can hide individual menu items on mobile devices.
1. Hiding a complete menu on mobile devices using CSS
One option is to completely remove the default mobile menu from your WordPress theme. This is a good choice if you want to use a different method of navigation on mobile, such as breadcrumb navigation links or interactive images.
First, you need to pinpoint the element that you’ll need to modify. To do that, simply go to your website and hover the mouse over the navigation menu.
After that, right click and select your browser’s Inspect tool.
Your browser screen will now split into two, and you’ll see the webpage’s code.
However, this navigation menu isn’t the one we need to target, since we can see it on the desktop screen.
Thankfully, there’s an easy way to bring up the mobile menu.
Simply drag the corner of the browser to make it smaller, until WordPress replaces the desktop navigation menu with the mobile menu.
Now, you need to figure out the identifier and CSS class used by the mobile navigation menu. Simply move your mouse over the source code until your browser highlights the menu area.
Once you have this information, go to Appearance » Customize in the WordPress admin area. In the left-hand menu, click on ‘Additional CSS.’
Then, click on the mobile icon in the bottom-right corner.
The customizer will now show a preview of how your site will look on mobile devices.
Simply add the following CSS into the small text editor, and the mobile menu will disappear:
.navbar-toggle-wrapper {
display:none;
}
Don’t forget to replace the .navbar-toggle-wrapper with the identifier you got from your own WordPress theme.
After that, click on the ‘Publish’ button at the top to make your changes live.
2. Hiding specific menu items in mobile menu using CSS
This method allows you to create a navigation menu and then selectively show or hide items that you don’t want to appear on mobile or desktop devices.
In this way, you can use the same navigation menu for mobile and desktop visitors.
First, go to Appearance » Menus and click on the Screen Options button at the top right corner of the screen. From here, you need to check the box next to the ‘CSS Classes’ option.
After that, scroll to a menu item that you want to hide on mobile and click to expand it.
In the menu item settings, you’ll see the option to add a CSS class. Here, simply go ahead and add a .hide-mobile CSS class.
Repeat the process for all menu items that you want to hide on mobile.
Similarly, you can click on any menu items that you want to hide on desktop computers. However, this time add the .hide-desktop CSS class instead.
When you’ve finished, don’t forget to click on the Save Menu button to store your changes.
With that done, you’re ready to hide these menu items using custom CSS. Simply go to Appearance » Customize and then click on the Additional CSS tab.
Now, you can add the following CSS code to the small text editor.
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
Don’t forget to click on the Publish button to save your changes.
Now, if you visit your website you’ll see that the menu items you wanted to hide on desktop are no longer visible. To test how the menu looks on mobile, simply shrink the browser screen until WordPress switches to the mobile menu.
We hope this article helped you learn how to easily hide a mobile menu in WordPress. You may also want to see our expert pick of the best drag and drop WordPress page builders and our guide on how to choose the best web design software.
Do you want to hide a mobile menu in WordPress?
Most WordPress themes automatically turn your default navigation menus into mobile-friendly menus. However, you may want to show a different menu to people who visit your site using smartphones or tablets.
In this article, we will show you how to easily hide the default mobile menu in WordPress, so you can show a custom menu instead.
Method 1. Hide a Mobile Menu in WordPress using a Plugin
The easiest way to hide the mobile menu provided by your WordPress theme is by using WP Mobile Menu. This plugin allows you to create a unique menu and then show it to mobile users. You can also hide the mobile menu that many themes provide by default.
First, you need to create the navigation menu that you want to show on mobile devices. To get started, head over to the Appearance » Menus page in your WordPress dashboard.
On the next screen, type in a name for the menu. It’s a good idea to use something that will help you identify the menu later, such as ‘Mobile Menu.’
After that, you can select all the posts and pages you want to add to the mobile menu.
For detailed instructions, please see our guide to creating a navigation menu in WordPress.
When you’re happy with how the menu is set up, don’t forget to click on the Save Menu button to store your changes.
With that done, it’s time to install and activate the WP Mobile Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, head over to Mobile Menu Options to configure the plugin settings.
Here, scroll to the bottom of the page and choose whether to show the mobile menu on the left or right-hand side of the screen using the ‘Enable Left/Right Menu’ toggles.
Next, open the ‘Choose one menu’ dropdown and select the mobile menu you created earlier.
After that, click on ‘Save Changes.’
There are lots of ways to fine-tune how the mobile menu looks. For example, you can select ‘Font Options’ and then change the font weight, spacing, font size, and more.
You can also select ‘Header Style’ and change how the mobile header looks and acts.
For example, you can add a shadow, change the header height, create a sticky navigation menu, and more.
Most of these settings are straightforward, so you can look through them and see what different kinds of effects you can create.
When you’re happy with how the mobile menu is set up, click on ‘Save Changes.’
Now you’ve set up the plugin, the next step is telling WordPress to show the mobile menu in one of the new locations added by the plugin.
Simply, go to the Appearance » Menus page. If it isn’t already selected, then open the ‘Select a menu to edit’ dropdown and choose the mobile menu you created earlier.
Then, under ‘Menu Settings’ select either ‘Left Mobile Menu’ or ‘Right Mobile Menu’ depending on where you want to show the menu.
After that, simply click on ‘Save Menu.’
Now, either visit your website on a mobile device or view the mobile version of your WordPress site from desktop. You should see the custom mobile menu.
By default, the plugin automatically hides menu elements used by most popular WordPress themes. This means that your theme’s default mobile menu should be hidden without you needing to do anything.
However, if the default mobile menu is still appearing, then you’ll need to go to Mobile Menu Options » Visibility Options in the WordPress dashboard.
Here, use the ‘Find Element’ button to point to your theme’s navigation menu. After that, don’t forget to click on the ‘Save Changes’ button to make your changes live.
Method 2. Hide Mobile Menu using CSS Code
This method is a bit advanced and requires you to add custom code to your website.
For this method, you can choose between two different approaches. You can hide the entire default mobile menu using CSS, or you can hide individual menu items on mobile devices.
1. Hiding a complete menu on mobile devices using CSS
One option is to completely remove the default mobile menu from your WordPress theme. This is a good choice if you want to use a different method of navigation on mobile, such as breadcrumb navigation links or interactive images.
First, you need to pinpoint the element that you’ll need to modify. To do that, simply go to your website and hover the mouse over the navigation menu.
After that, right click and select your browser’s Inspect tool.
Your browser screen will now split into two, and you’ll see the webpage’s code.
However, this navigation menu isn’t the one we need to target, since we can see it on the desktop screen.
Thankfully, there’s an easy way to bring up the mobile menu.
Simply drag the corner of the browser to make it smaller, until WordPress replaces the desktop navigation menu with the mobile menu.
Now, you need to figure out the identifier and CSS class used by the mobile navigation menu. Simply move your mouse over the source code until your browser highlights the menu area.
Once you have this information, go to Appearance » Customize in the WordPress admin area. In the left-hand menu, click on ‘Additional CSS.’
Then, click on the mobile icon in the bottom-right corner.
The customizer will now show a preview of how your site will look on mobile devices.
Simply add the following CSS into the small text editor, and the mobile menu will disappear:
.navbar-toggle-wrapper {
display:none;
}
Don’t forget to replace the .navbar-toggle-wrapper with the identifier you got from your own WordPress theme.
After that, click on the ‘Publish’ button at the top to make your changes live.
2. Hiding specific menu items in mobile menu using CSS
This method allows you to create a navigation menu and then selectively show or hide items that you don’t want to appear on mobile or desktop devices.
In this way, you can use the same navigation menu for mobile and desktop visitors.
First, go to Appearance » Menus and click on the Screen Options button at the top right corner of the screen. From here, you need to check the box next to the ‘CSS Classes’ option.
After that, scroll to a menu item that you want to hide on mobile and click to expand it.
In the menu item settings, you’ll see the option to add a CSS class. Here, simply go ahead and add a .hide-mobile CSS class.
Repeat the process for all menu items that you want to hide on mobile.
Similarly, you can click on any menu items that you want to hide on desktop computers. However, this time add the .hide-desktop CSS class instead.
When you’ve finished, don’t forget to click on the Save Menu button to store your changes.
With that done, you’re ready to hide these menu items using custom CSS. Simply go to Appearance » Customize and then click on the Additional CSS tab.
Now, you can add the following CSS code to the small text editor.
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
Don’t forget to click on the Publish button to save your changes.
Now, if you visit your website you’ll see that the menu items you wanted to hide on desktop are no longer visible. To test how the menu looks on mobile, simply shrink the browser screen until WordPress switches to the mobile menu.
We hope this article helped you learn how to easily hide a mobile menu in WordPress. You may also want to see our expert pick of the best drag and drop WordPress page builders and our guide on how to choose the best web design software.
Have a question or suggestion? Please leave a comment to start the discussion.