How to Hide a Mobile Menu in WordPress?

0
212

Do you want to learn the way to hide a mobile menu in WordPress?

We all know very well that menus are quite larger and more complicated for mobile users who own very limited screen space. That is why WordPress theme mostly comes with built-in styles that will automatically convert the navigation menu into a mobile menu. 

Therefore, many premium themes provide mobile menus. However, you may have your own theme that works the way you want but doesn’t have this option. In addition to this, even if the theme has this function, you might not want to use the same menu time and again.

 So, we are here to help you out. We will cover different ways i.e using a plugin or code to hide a mobile menu. Let us start: 

Different Methods to Hide a Mobile Menu

Here are the different steps:

1. Using a Plugin

In this method, we are using the WP Mobile Menu plugin to hide the menu. No doubt, the use of the plugin is the easy solution to the problem. This method is recommended for all beginners as it is easy to perform. Follow the steps mentioned below:

  • Firstly, navigate to Appearance >> Menus where you need to create a new menu that you will display on the mobile. 
  • Give it a suitable name and click on the “Create menu” button.
  • Then select the items you want to include in the menu from the left column. 
  • After completing the settings of the menu make sure to save the changes.
  • After activation, you need to configure the plugin’s setting by heading to the page Mobile Menu Options. Here, you should decide whether you want to display the menu either in the right or left by turning the toggle ON. Select the menu you recently created with the help of the drop-down menu. 
  • Go to the “Visibility options” section. Most importantly, this is the place where you order plugins to hide a mobile menu.

Note: The plugin uses the common element identifiers which are used by the most popular WordPress themes by default. n the case of the plugin failing to hide a mobile menu, you need to return back to the setting page and click on the “Find Element” button to point on the navigation menu of the theme.

  • Save the changes.
  • Again, visit Appearance >> Menus page. Ensure that the menu created earlier is selected in the drop-down menu. Also, make the location the same as in the plugin’s Settings page. 
  • Lastly, visit your website to see the changes in the action. 

Thus, you have successfully hidden a mobile menu in WordPress.

2. By Using CSS 

This method is more advanced than the above method and requires the knowledge of codding. Here, we will hide the specific menu items in the mobile menu using CSS. For instance, you can create a navigation menu and can selectively display or hide the items either on mobile or desktop devices. 

Additionally, the main significance of using this method is that the same navigation can be used for mobile as well as desktop. Also, it easily hides the items you want to exclude from the site. Follow the steps mentioned below:

  • Start by going to Appearance >> Menus. Click on the “Screen Options” button which is located at the top right corner and check the box beside the “CSS Classes” option. 
  • Next, scroll down to the menu item you would like to hide and click on it to expand the setting option. You will now find a CSS class option to add codes. Carry on by adding .hide-mobile CSS class in the box. 
  • You need to repeat the process for each menu in order to hide them on the mobile.
  •  Apart from this, you can also hide menus on the desktop as well. All you need to do is click on the menu, expand it and add .hide-desktop CSS in the CSS option box.  
  • After finishing the setting, don’t forget to save the changes. 
  • Now, it’s your turn to add the CSS to hide the menu. Again, head to Appearance >> Customize page.
  • Add the code mentioned below in the CSS box:

@media (min-width: 980px){

    .hide-desktop{

    display: none !important;

    }

}

    @media (max-width: 980px){

    .hide-mobile{

    display: none !important;

    }

}

  • Make sure you click on the “Publish” button.
  • Finally, you can visit your website to check if the code is actually working.

Hence, you have hidden a menu in both mobile and desktop using CSS code without any problem through this method.

In Conclusion

Lastly, we hope this tutorial was helpful for you. We have mentioned the two easiest ways to hide a mobile menu, you can use the one which is easier for you. Also, if are interested to learn more about WordPress check out our other article “How to Hide Unnecessary Menu Items From WordPress Admin?”.

LEAVE A REPLY

Please enter your comment!
Please enter your name here