Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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

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.

Hiding a WordPress menu on mobile

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.

Create a new menu to be used on mobile devices

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.

Adding menu items

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.

Creating a mobile friendly navigation menu

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.

Hiding the mobile menu in WordPress

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.

Customizing the fonts in a mobile menu

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.

Changing the header in a WordPress mobile menu

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.

Setting a mobile menu in WordPress

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.

Mobile menu replaced

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.

Changing the mobile menu visibility settings

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.

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.

Source code while viewing your desktop menu

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.

Mobile menu identifier

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.’

Adding custom CSS to a WordPress theme

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.

How to preview a mobile menu on desktop

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.

Screen Options

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.

Add 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;
    }

}
Add your custom CSS

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.

Different menus on desktop and mobile screens

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.

Hiding a WordPress menu on mobile

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.

Create a new menu to be used on mobile devices

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.

Adding menu items

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.

Creating a mobile friendly navigation menu

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.

Hiding the mobile menu in WordPress

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.

Customizing the fonts in a mobile menu

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.

Changing the header in a WordPress mobile menu

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.

Setting a mobile menu in WordPress

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.

Mobile menu replaced

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.

Changing the mobile menu visibility settings

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.

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.

Source code while viewing your desktop menu

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.

Mobile menu identifier

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.’

Adding custom CSS to a WordPress theme

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.

How to preview a mobile menu on desktop

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.

Screen Options

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.

Add 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;
    }

}
Add your custom CSS

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.

Different menus on desktop and mobile screens

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.