How to Hide Your WordPress Mobile Menu
With the number of mobile internet users surpassing desktop ones, it’s no surprise that website designers go out of their way to cater to them. Having a mobile version of a website, or even converting a website into a mobile app has become the norm. The reason for that is simple: different aspect ratios and different resolutions require different modes of display for different features, or different features altogether. This is called responsive design: different versions for different screen sizes. And one of the features that presents problems to designers and users of hand-held devices is the menu.
Menus can be large, complicated, and cumbersome for mobile users who, by the very nature of their devices, have limited screen space. This is why many premium WordPress themes are equipped with mobile menus. Still, you may have a theme which looks and works exactly the way you want it that simply lacks this option. So, if you want to hide your mobile menu or maybe replace it with another, you have us to help you with that. This is what we’ll be talking about:
The first thing we would like to show you is how to hide a menu or parts of a menu on mobile devices using CSS. This will require a little coding on your part, and also the use of the inspect tool, but it’s no big deal either way.
In order to hide the whole menu, you need to find out the identifier and the CSS class of your menu. That can vary from theme to theme, which is where the inspect tool comes in handy. Simply right-click anywhere on your website, provided you haven’t disabled right-clicking, and select Inspect from the drop-down menu. You can also press the F12 button.
Now, having turned on the inspect tool, you can scroll down the Elements tab to highlight the elements in the main view. You can easily find the menu in the desktop version of your website, but that’s not the one you need to hide. Instead, you need to resize your screen to show the narrower view by dragging the vertical edge of your window. The class we want to hide on the mobile version of our website is called menu-button-container. Note that on your website the class might be named differently.
In order to hide this particular version of the menu from the mobile version of the website, you need to add some CSS to your website. Navigate to Appearance/Customize from your WordPress dashboard and select the Additional CSS section and the Mobile version of the website. You can switch between the different versions of your website in the bottom left hand-side menu. Click the mobile icon to edit the mobile version of the website.
The code you need to enter into the Additional CSS field is:
.menu-button-container {
display:none;
}
Once you have done that, you can see that the menu has disappeared from the preview window. In order to save your changes, you need to click the Publish button, and your mobile menu will not appear in the mobile version of your website.
Of course, you will need to replace the menu-button-container with the class of your own mobile menu.
Qode Themes: Top Picks
View Collection
But what if you don’t want to hide the entire menu? Hiding only a couple elements will make it shorter and more easily navigable for your mobile device-using visitors.
In order to hide any one element, you will, again, need to add some CSS to the menu. First, navigate to Appearance/Menus from your WordPress dashboard, click Screen Options in the upper right-hand side, and check CSS Classes.
Now, say we want to hide the Team element from our Main Menu for mobile users. Clicking on it now, you will see that you have enabled a field labeled CSS Classes (optional). Here, you can assign a class to a menu element. We will assign the class hide-on-mobile to the Team element and Save our menu.
You can name your classes whatever you like, within these naming rules: a class must begin with a letter (uppercase or lowercase) and use letters, digits, underscores, and hyphens in the rest of the name.
This merely labels the Team element in our Main Menu as belonging to the class hide-on-mobile. In order to actually hide all elements of this class from the mobile version of the website, we need to add – you guessed it – some code to our website. Navigate to Appearance/Customize from your WordPress dashboard and select the Additional CSS section.
The code you need to add into the Additional CSS field is this:
@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}
This code hides all elements belonging to the hide-on-mobile class when the width of the website is 767 pixels or less. Of course, you can do this for any individual menu element, hiding or showing different elements for different devices.
As is very common, if a theme doesn’t work exactly the way you like it, you can supplement it with a plugin. The plugin we will be using is WP Mobile Menu. Mind, though, that there are plenty of responsive menu plugins to choose from.
Once you have installed and activated the plugin, you will be automatically taken to a screen prompting you to accept some additional security features by the same developer. We will skip them.
You will then be taken to the plugin’s configuration screen. The first section up is the Main Options section. There, you need simply to toggle both the left and the right menu off. In the Visibility Settings further down, you need to toggle the Enable only in Mobile devices toggle to On.
Further down, in the Hide Original Theme Menu section, you need to make sure all the menu elements are checked to be hidden by the plugin.
Depending on the theme you are using, you may need to use the Find element search in case one of your menu elements is unconventionally named and the plugin doesn’t recognize it. This may vary from theme to theme, so we can’t be any more specific, but most themes will use conventional elements.
Once done, Save Changes, and visit your website from a mobile device. You will see that the menu does not appear.
But what if you just want a different version of a menu for mobile devices? Actually, that is this plugin’s primary function. In that case, you will need to create a menu for the mobile version of your website. We won’t go into the details of creating a new menu here. If you need help creating a menu, we have a full tutorial on adding menus in WordPress. Remember to check Left Mobile Menu or Right Mobile Menu when creating a mobile menu.
We will nonetheless use this space to say that a mobile menu should be as pared-down as possible, all the way to the very basics. We advise you to use only the basic navigation options for the mobile version of your menu. Your mobile users are more likely to use a search bar if they are after a specific page.
Once you have created and saved a menu, navigate to Mobile Menu Options from your WordPress dashboard.
Here, in the Main Options section, you need to select your mobile menu for display. We have named ours Mobile Menu, but you can name yours whatever you want. You can also toggle to enable left and right menus. Mind that you will need to have the menu display position checked on the menu creation screen.
Next down, you have the Visibility Options section. These govern the conditions under which the mobile menu appears. In order to show your mobile menu, you need to make it visible for mobile devices..
Next, in the Hide Original Theme Menu section, you can choose which menu elements to hide from the mobile version. This is an effective way of creating a mobile version of a menu, if you know your way around its structure. Most common menu elements are checked for hiding by default.
Further down are some miscellaneous and advanced options which allow you to further customize your mobile menu. We won’t go into the details here, as they are not relevant to showing or hiding mobile menus.
You will need to Save Changes once you are done configuring your menu.
And our mobile menu, with just the very basics, appears in the mobile version of our website. Your original mobile menu is hidden, and a new one is in its place.
In Conclusion
As we have shown, creating, showing and hiding mobile menus and creating alternate versions of menus takes only a little work, and there are even plugins which can do most of the work for you. Whatever kind of website you’re operating, chances are a large part of your visitors is using mobile devices. While creating a whole alternate version of your website may be too cumbersome for you, making one small adjustment is no trouble at all. No reason, then, not to make it.
