Mobile navigation is crucial for enhancing the user experience on your WordPress site. At CanadaCreate, we’ve found that the standard mobile menu settings often do not meet the needs of our users.
Although WordPress themes effectively transform desktop menus into mobile-friendly formats, this automatic adjustment may not always be the optimal choice.
Many users require different navigation options for mobile visitors, whether for ease of use, special offers, or to boost conversion rates.
In this article, we will guide you through the process of easily hiding the default mobile menu in WordPress, allowing you to display a custom menu instead.
We will explore two distinct methods in this tutorial, and you can use the quick links below to navigate to your preferred method:
- Method 1: Hide the Mobile Menu in WordPress Using a Plugin
- Method 2: Hide the Mobile Menu Using CSS Code
Method 1: Hide the Mobile Menu in WordPress Using a Plugin
The simplest way to conceal the mobile menu provided by your WordPress theme is by utilizing the WP Mobile Menu plugin.
This plugin enables you to create a custom menu specifically for mobile users and allows you to hide the default mobile menu that many themes offer.
Create Your Custom Mobile Menu
Begin by creating the mobile navigation menu you wish to display on mobile devices. To start, navigate to the Appearance » Menus section in your WordPress dashboard.
On the following screen, enter a name for your menu. It’s advisable to choose a name that will help you recognize the menu later, such as ‘Mobile Menu’.
Next, select all the posts and pages you would like to include in the mobile menu.
For more comprehensive instructions, refer to our guide on how to create a navigation menu in WordPress.
Once you are satisfied with the menu layout, don’t forget to click the ‘Save Menu’ button to apply your changes.
Set Up the Plugin Settings
Now that you’ve created your menu, it’s time to install and activate the WP Mobile Menu plugin. For detailed instructions, check out our step-by-step guide on installing a WordPress plugin.
After activation, go to the Mobile Menu Options to set up the plugin settings.
Scroll down to the bottom of the page and select whether to display the mobile menu on the left or right side of the screen using the ‘Enable Left/Right Menu’ toggles.
Then, open the ‘Choose one menu’ dropdown and select the mobile menu you created earlier.
Once you’re done, click on ‘Save Changes’ to apply your settings.
There are numerous ways to customize your WordPress navigation menu. For instance, you can choose ‘Font Options’ to adjust the font size, weight, spacing, and more.
You can also choose ‘Header Style’ to modify the appearance and behavior of the mobile header.
For example, you can add a shadow effect, adjust the header height, create a sticky navigation menu, and more.
Most of these settings are user-friendly, allowing you to explore various effects you can implement. For example, you can add an image icon or apply custom CSS to your WordPress menus.
When you’re satisfied with the mobile menu configuration, simply click on ‘Save Changes’ to finalize it.
Integrate Your Mobile Menu into WordPress
Now that you’ve configured the plugin, the next step is to specify where WordPress should display the mobile menu by navigating toAppearance » Menus.
If it’s not already selected, open the ‘Select a menu to edit’ dropdown and choose the mobile menu you created earlier.
Next, under ‘Menu Settings’, select either ‘Left Mobile Menu’ or ‘Right Mobile Menu’, depending on your preferred menu location.
After that, click on ‘Save Menu’ to save your changes.
To see the custom mobile menu, either access your website on a mobile device or view the mobile version of your WordPress site from your desktop.
Troubleshooting Guide: Hiding the Default Mobile Menu
The plugin automatically hides menu items commonly used by popular WordPress themes, so your theme’s default mobile menu should be hidden without any additional steps.
If the default mobile menu is still visible, navigate to Mobile Menu Options » General Options » Visibility Optionsin your WordPress dashboard.
Click the ‘Find Element’ button here.
This will open a mobile version of your website.
In this popup, select the content you wish to hide on mobile devices, such as the menu provided by your WordPress theme.
This action will add the content’s CSS class to the ‘Hide Elements’ field.
After that, click ‘Save Changes’. The theme’s menu should no longer be visible on mobile devices.
Method 2: Hiding the Mobile Menu with CSS Code
This method is more advanced and requires you to insert custom code into your website.
You have two options for this method. You can either completely hide the default mobile menu using CSS or selectively hide specific menu items on mobile devices.
1. Hiding the entire mobile menu using CSS
One option is to entirely remove the default mobile menu from your WordPress theme. This is ideal if you prefer an alternative navigation method on mobile, such as breadcrumb links or interactive images.
First, locate the element you need to modify. To do this, visit your WordPress website and hover your mouse over the navigation menu.
Next, right-click and choose the Inspect tool from your browser.
Your browser window will now split into two sections, displaying the page’s code, including the code for the navigation menu.
However, we don’t want to modify this navigation menu since it is visible on the desktop version.
Fortunately, there is a straightforward way to access the mobile menu instead.
Simply resize the browser window by dragging its corner until WordPress switches from the desktop navigation menu to the mobile menu.
First, identify the CSS class and identifier for your mobile navigation menu. Hover over the source code until your browser highlights the menu section, revealing the necessary class and identifier.
With this information, you can easily hide the mobile menu using code.
Many WordPress tutorials recommend adding custom code to your functions.php file. However, this method can be risky for beginners, as even a minor error in the code can lead to common WordPress issues or even crash your website.
A safer alternative is to use WPCode for adding custom code.
This free plugin allows you to incorporate custom CSS, PHP, HTML, and more into your WordPress site without the risk of breaking it. You can simply paste your code into WPCode’s editor and activate or deactivate it with a single click.
To begin, install and activate the WPCode plugin. For detailed instructions, refer to our step-by-step guide on how to install a WordPress plugin.
Next, navigate toCode Snippets » Add Snippetin your WordPress dashboard.
Discover a variety of pre-made snippets available for your website. These include options to completely disable comments, enable support for additional file types, disable attachment pages, and much more.
To add custom CSS to your website, simply hover over ‘Add Your Custom Code’ and click the ‘+ Add Custom Snippet’ button.
Next, choose ‘CSS Snippet’ from the list of available code types on the screen.
This action will direct you to the Create Custom Snippet page.
Begin by entering a title for your code snippet. Choose a name that will help you recognize it in your WordPress dashboard.
After that, you can paste or type the following code into the code editor:
.navbar-toggle-wrapper {
display:none;
}
Remember to replace.navbar-toggle-wrapperwith the identifier you found using the Inspect tool in your browser.
When you’re ready to publish the code snippet, scroll to the top of the screen and toggle the switch from ‘Inactive’ to ‘Active’.
Finally, click on ‘Save Snippet’ to activate your snippet.
Your theme’s mobile menu will now be hidden on smartphones and tablets.
2. Hiding specific items in the mobile menu using CSS
This technique enables you to create a navigation menu and selectively display or hide items that you prefer not to show on mobile or desktop devices.
This way, you can maintain the same navigation menu for both mobile and desktop users. First, navigate to Appearance » Menus.
Once completed, click the ‘Screen Options’ button located in the top right corner of the screen.
Here, ensure you check the box next to the ‘CSS Classes’ option.
Next, scroll to the menu item you wish to hide on mobile and click to expand it.
In the settings for the menu item, you will find an option to add a CSS class. Simply enter a .hide-mobile CSS class here.
Repeat this process for all menu items you want to hide on mobile.
Likewise, you can select any menu items you wish to hide on desktop computers. This time, add the .hide-desktop CSS class instead.
After completing these steps, remember to click the ‘Save Menu’ button to apply your changes.
Now you’re ready to hide specific menu items using custom CSS. Just create a new custom code snippet by following the same steps outlined earlier.
Next, add the following CSS code in the WPCode editor:
@media (min-width: 980px){ .hide-desktop{ display: none !important; }
} @media (max-width: 980px){ .hide-mobile{ display: none !important; }
}
After that, simply publish your code snippet.
Now, when you visit your WordPress blog, the menu items you chose to hide on desktop will no longer be visible. To check how the menu appears on mobile, just resize your browser window until WordPress switches to the mobile menu.
We hope this guide has helped you learn how to easily hide a mobile menu in WordPress. You might also want to explore our expert recommendations for the best drag and drop WordPress page builders and our tutorial on adding conditional logic to menus.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
