Categories
How To Be Pro In WP

How to Hide a Mobile Menu in WordPress (Beginner’s Guide)

Do you want to hide a mobile menu in WordPress?

Most WordPress themes have built-in styles that will automatically turn your navigation menus into a mobile menu. However, you may not want to use the same menu on mobile devices or use a different menu style.

In this article, we are going to show you how to easily hide a mobile menu in WordPress using a plugin or code method.

Method 1. Hide a mobile menu in WordPress using a plugin

This method is easier and is recommended for beginners. We use a plugin to hide your existing mobile menu provided by your WordPress theme and then use a different menu or no menu at all on mobile devices.

You have to visit them first Appearance »Menus Page and create a new navigation menu to display on mobile devices.

Create a new menu for mobile devices

On the next screen, you’ll need to provide a name for your new menu that you can use to identify it later. We call it “Mobile Menu”. After that, in the left column, you can choose the items that you want to add to your menu.

Adding menu items

When you’re done adding items to your menu, don’t forget to click the Save Menu button to save your menu.

If you need help creating a new navigation menu, follow our beginner’s guide to creating a navigation menu in WordPress.

Next you need to install and activate the WP Mobile Menu plugin. For more information, see our step-by-step guide to installing a WordPress plugin.

After activation you need to visit Mobile menu options Page for configuring the plugin settings. From here, you’ll need to choose whether to display your mobile menu on the right or left by flipping the switch on.

Choose the mobile menu and its direction

Select the mobile menu you created earlier from the drop-down menu.

Next, you need to scroll down to the “Hide Original Themes Menu” section. Here you can instruct the plugin to hide a mobile menu created by your WordPress theme.

Hide the theme's mobile menu in WordPress

By default, the plugin uses commonly used Element IDs that are used by most of the popular WordPress themes. Most users wouldn’t have to do anything here.

However, if the plugin doesn’t hide your topic’s menu, you can come back here and click the “Find Item” button to simply point to your topic’s navigation menu.

Don’t forget to click the Save Changes button to save your settings.

Now that we’ve set up the plugin, we need to instruct the WordPress site to display our mobile menu in the new menu location added by the plugin.

Just go to the Appearance »Menus Page. Make sure the mobile menu you created earlier is selected in the drop-down menu. Under your menu item, select the location that you selected in the plugin settings (e.g. left mobile menu or right mobile menu).

Menu position

You can now visit your website to see your new menu in action. The plugin will now hide your theme’s mobile menu and instead display a custom menu.

Mobile menu replaced

The WP Mobile menu plugin allows you to change the color of the menu bar, change the opacity, add icons and a lot more in the settings. Feel free to play around with these settings.

Method 2. Hide mobile menu with CSS code

This method is a little advanced and requires the use of custom CSS.

You can use two different approaches to this method. You can easily hide an entire mobile menu using CSS, or hide individual menu items on mobile devices.

1. Hide an entire menu on mobile devices using CSS

First of all, you need to identify the element that you need to modify using custom CSS. To do this, just go to your website and hover your mouse over your navigation menu. After that, right click and select Inspection Tool.

Check tool

Your browser screen will be split in two and you will see the source code of your website. This navigation menu is not the one to aim at as it will appear on the desktop screen.

Source code when viewing your desktop menu

You’ll need to rearrange your browser screen by dragging it from the corner to a smaller size until the desktop navigation menu is replaced with the mobile menu.

Mobile menu identification

You need to find out the identifier and CSS class used by your WordPress navigation menu. You can do this by hovering your mouse over the source code until the menu area is highlighted.

As you can see in the screenshot above, our test topic uses the navbar-toggle-wrapper class.

After that you have to go Appearance »Customize Page in the WordPress administration area to start the Theme Customizer. Here you need to switch to the “Additional CSS” tab and click on the mobile icon in the lower right corner of the left window.

Adding custom CSS to hide the entire menu

The customizer will now preview how your website will look on mobile devices. You can now enter the following CSS code and see that your mobile menu disappears in the preview window.

.navbar-toggle-wrapper {Display: none; }}

Don’t forget to replace the .navbar-toggle-wrapper with the identifier used by your WordPress theme.

Then click the Publish button above to save your changes.

2. Hide certain menu items in the 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 show on mobile or desktop devices.

The advantage of this method is that you can use the same navigation menu for mobile devices and desktops, and you can just hide the items that you don’t want to appear.

First you have to go Appearance »Menus Click the Screen Options button in the top right corner of the screen. From here, you’ll need to check the box next to the “CSS Classes” option.

Screen options

After this. You’ll need to scroll down to a menu item you want to hide on mobile and click to expand it. In the menu item settings you will now see the option to add a CSS class. Add the .hide mobile CSS class there.

Add CSS class

Repeat the process for all menu items that you do not want to display on the phone.

Likewise, you can click the menu items that you want to hide on desktop computers. This time, add the .hide-desktop CSS class instead.

When you’re done, don’t forget to click the Save Menu button to save your changes.

Now let’s add custom CSS to hide these menu items. Just go to the Appearance »Customize Page to launch the Theme Customizer and click the Additional CSS tab.

You need to paste the following CSS code into the CSS field.

@media (min-width: 980px) {.hide-desktop {display: none! important; }} @media (maximum width: 980px) {.hide-mobile {display: none! important; }}

Add your custom CSS

Don’t forget to click the Publish button to save your changes.

You can now visit your website and find that items that you wanted to hide from the desktop no longer appear in the menu. Resize your browser’s screen to a smaller size and you will notice this for the mobile menu too.

Various menus on desktop and mobile screens

We hope this article has helped you learn how to easily hide a mobile menu in WordPress. You might also want to check out our article on how to create custom pages in WordPress or how to create a custom theme from scratch without writing any code.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.