[ad_1]
Should you want to hide a WordPress mobile menu?
Most WordPress themes come with built-in styles which automatically turn your browsing menus into a mobile menu. However, you do not want to use the same smartphone menu or you may want to use a different menu type.
In this article we will show you how to easily mask a mobile menu in WordPress using a plugin or code method.
Method 1. Hide a smartphone menu in WordPress with the help of a plugin.
This method is more straightforward and is recommended for beginners. We can use a plugin to hide your existing mobile menu provided by your WordPress theme, then use a different menu or some at all on mobile devices.
First, you can visit the Menu Appearance page and create a new browser menu you want to use on mobile devices.
On the next screen, you must have a name for your new menu that will help you identify it later. We will name it “Mobility Menu.” After that, you can select the things you want to include in your menu in the left column. If you have finished adding items to your menu, don’t forget to click on the Save Menu button to save your menu.
If you need help with creating a new navigation menu, follow our beginner’s guide to create a browsing menu in WordPress.
Then you can update and use the WP Mobile Menu to plug in. For more details, click here.See our step-by-step guide on how to mount a WordPress plugin.
When enabling, you must visit Mobile page menu options to set the plugin’s settings. From there, you must choose whether you want to display your smartphone menu on right or left by enabling the switch. From the drop-down menu, choose the smartphone menu you created previously.
Then you have to scroll to the ” Mask the menu of the original theme ” segment. Here you can ask the plugin to hide a smartphone menu created by your WordPress theme.
By default, the plugin would use the commonly used element identifiers used by the most popular WordPress themes. The majority of users would not need to do anything in this section.
However, if the plugin does not succeed in masking the menu of your subject, you can go back here and click on the button ” Search for an item ” to only point to the navigation menu of your theme.
Do not forget to click on the Save changes button to save your settings.
Now that we set up the plugin we must tell the WordPress site to display our mobile menu in the new menu location added by the plugin.
Only go to the “Menus tab” appearance. Make sure the smartphone menu you created earlier is selected from the drop-down menu. Under your menu item, choose the location you selected in the plugin settings (par exemple, menu mobile gauche ou menu mobile droit).
You can now check your website and see your new menu in action. The plugin will now hide the mobile menu of your theme and display a custom menu instead.
The WP Mobile Menu Plugin allows you to change the color of the menu bar, change opacity, add icons and more in the settings. Do not hesitate to play with these settings.
Method 2. Check the mobile menu using the CSS file.
This method is slightly advanced and requires the use of customized CSS.
For this method, you can choose to use two different approaches. You may simply hide a whole mobile menu using CSS, or hide individual menu items on mobile devices.
1. Hide a whole menu on mobile devices using CSS.
First, you must determine the item you need to change with the help of Custom CSS. To do so, just visit your website and click on the mouse on your browsing menu. After that, right click the mouse button and choose the Inspect tool.
Your browser will be split into two parts and you will see your website’s source code. Now this browser menu is not the one you would target as it is available on the desktop screen.
You must reorganize the display of your browser by dragging it from the corner to a smaller size, before the desktop’s browsing menu is replaced by the mobile menu. You must determine the identifier and CSS class used for your WordPress browsing menu. You will do this by moving the mouse on the source code until the menu area is highlighted.
As you will see in the screenshots above, the navbar-toggle-wrapper classer is included in our test theme.
After that, you must go to Appearance ‘customize page in the WordPress administration area to launch the theme customizer. Here you must go to the ‘Extra CSS’ tab and click the smartphone icon in the lower right corner of the left panel. The customizer will now show an overview of your site appearance on mobile devices. You will now enter the following CSS code and see your mobile menu disappear in the preview panel.
.navbar-toggle-wrapper {
display:none;
}
Don’t forget to replace the.navbar-toggle-wrapper with the ID used for your WordPress theme.
After that, click the “Publish” button at the top to save the changes.
2. Hide specific menu items in the mobile menu using CSS.
This method allows you to create a browsing menu, then selectively to display or mask items you do not want to display on mobile or desktop devices.
The benefit of this method is that you can use the same browsing menu for smartphone and desktop and simply hide items you don’t want to see.
First you must go to the Appearance »Menus tab and click the Screen Options button at the top right of the screen. From here you must tick the box next to the “CSS Classes” option.
Then it. you have to scroll down to a menu item that you want to hide on mobile devices and click to expand. In the menu item settings, you can now see the option to add a CSS class. Go ahead and add.hide-mobile CSS class out there. Repeat the procedure for any menu items that you don’t want to see on mobile.
Likewise, you can also click on the menu items that you want to hide on the desktop computers. This time, add the CSS Class.hide-desktop instead. When you have finished, don’t forget to click on the Save menu button in order to save your changes.
We are now going to add customized CSS to hide these menu items. Only go to the Appearance “To customize page to start the theme customizer and click on the extra CSS tab.
You must include the following CSS code in the CSS sector.
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
Don’t forget to click the Publish button to save your changes. You will now access your website and you can see that what you used to hide on your desktop is no longer available in the toolbar. Adjust the browser screen to a smaller size and you can notice the same thing with the mobile menu. We hope this article has helped you to learn how to easily hide a smartphone menu in WordPress.
Discussion about this post