Tips to Hide a Mobile Menu in WordPress

April 29. 2021

In most cases, WordPress themes already have defined styles that allow them to transform a regular navigation menu into a mobile menu. It’s convenient if you need a quick solution out of the box. For example, you have a traditional layout for desktop computers and a hamburger menu on mobile devices. However, if you want to further customize or even completely replace your existing mobile menu, that’s also possible. There are several ways to hide a mobile menu in WordPress, either with plugins or code.

How to hide a mobile menu in WordPress

Complete website customization requires a bit of knowledge and experience. If you want to have safe customization without risk, you can use professionals to customize and maintain your website. While there are some easy parts you can do on your own, more serious customization does require a professional touch. When it comes to the mobile menu in WordPress, you can use plugins to simplify the process. Or, if you have coding knowledge, you can create changes directly inside the code.

To help you change the way mobile menu appear on your website, here are the two most common ways to complete it:

• Hide a mobile menu in WordPress with a plugin
• Hide mobile menu with CSS code

How to hide a mobile menu in WordPress with a plugin

You have probably found a WordPress theme with an interesting mobile menu behavior, and want to easily replicate it. This method doesn’t require coding knowledge, so it’s more convenient for this task. After you install a plugin, you will be able to completely remove your mobile menu on mobile devices. Also, some plugins will allow you to customize it in depth. Besides basic hiding, you can also use it to remove only specific elements in your menu.

Creating a new mobile menu

The first step is to go to Appearance>Menus. There you will be able to create a new menu by clicking on the “create new menu” option on the top. Give your new menu a name and confirm this with the “Create Menu” button on the lower right corner of the screen.

After these steps selection on the left side will no longer be unclickable, and you can add items for your new menu. When you are complete with adding new items, just click on “Save Menu”.

Find and install a plugin

The next step is to find and install a plugin. There are numerous plugins that can help you manipulate and customize menus. Some of the most popular are WP Mobile Menu, Max Mega Menu, Responsive Menu, and so on. For the sake of explanation, let’s install and activate WP Mobile Menu.

Once you are done, go to Mobile Menu Options on your left WordPress sidebar. Inside plugin options, you can now choose whether you want to display your new mobile menu on the left or right. Select the previously created menu and then scroll down to “Hide Original Theme Menu”. There, you can choose to remove specific elements from the original menu. If you click on the “Find Element” field, you will get a live preview of selections to choose from. After you are complete with the selection process, just save the changes.

Replace or hide menu

After you have chosen what to hide, just go back to Appearance>Menus. Select from a drop-down menu your previously created mobile menu and set its “Display location”. Your original menu is now hidden and replaced with your custom menu.

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

How to hide menu with CSS code

Another method to hide the mobile menu requires a certain knowledge of CSS code and practices. People that often create custom WordPress themes already know how complex some customization can be. And, given these points, it’s not exactly recommended method for beginners. Nevertheless…

Find your menu name

The first step is to find the menu you want to edit. Probably the easiest way is to use integrated browser developer tools. Go to your website where you want to make changes and open developer tools. If you are using Google Chrome, you can do it with the Ctrl+Shift+I shortcut. On the top of the screen, you will find the Toggle Device Toolbar option which will show you how your website looks like on mobile devices. You can even change different types and resolutions.

Now that you see how it displays on mobile devices, select the arrow-like button and click on your menu to inspect it. It will immediately lead you to the part of the code where you can see the CSS class for a given menu. That is, you will see that class name.

Hide your menu with a new line of code

After you acquired the proper name, simply go to Appearance>Customize and select “Additional CSS”. In general, this is usually at the bottom of the left sidebar. Click it, and you will be given the next screen. There, you can click on the bottom of the screen to select mobile view and, above it, you will enter the code to hide the menu:

Code: .menu-name {display: none;}

Finally, click on the Publish button and you are done. If you are a bit more familiar with CSS code, a lot of these changes can be completed inside the CSS file. However, you will have to pay attention to media queries. They will allow you to create different rules for different devices, so you can have more control over your websites and menu behavior.

If you are a beginner in layout editing, the plugin option is probably the best way to start. If you start to change the code without knowing exactly what you are doing, you can easily break your website appearance. There are numerous rules and properties in CSS that overwrite each other. So, if you want to hide your mobile menu in WordPress without risk, use plugins to complete the job for you.