with the number mobile internet users outnumber desktop usersIt’s no surprise that website designers do their best to appeal to them. Having a mobile version of a website, or even turning a website into a mobile app, has become the norm. The reason for this is simple: different aspect ratios and different resolutions require different display modes for different featuresor completely different features. This is called responsive design: different versions for different screen sizes. One of the features that gives trouble to designers and users of handsets is the menu.
Menus can be large, complex and cumbersome for mobile users who have limited screen space due to the nature of their device. This is why many premium WordPress themes are equipped with mobile menus. You can still have a theme that looks and works exactly the way you want, but it lacks that option. So, if you want to hide your mobile menu or replace it with another one, we have to help you with that. Here’s what we’ll talk about:
The first thing we want to show you is how to hide a menu or parts of a menu on mobile using CSS. This will require some coding on your part and also the use of the review tool, but either way it doesn’t matter.
To hide the entire menu, you need to find your menu’s identifier and CSS class. This can vary from theme to theme, which is where the review tool comes in handy. Right-click anywhere on your website, provided you have not disabled right-clicking and To examine from the drop-down menu. You can also press the F12 key.
Now you can scroll down after opening the review tool. elements Tab to highlight items in the main view. You can easily find the menu on the desktop version of your website, but that’s not what you need to hide. Instead, you have to resize your screen to show the narrower view by dragging the vertical edge of your window. The name of the class we want to hide in the mobile version of our website menu button container. Note that the class may be named differently on your website.
To hide this particular version of the menu from the mobile version of the website, you need to add some CSS to your website. Set route to Appearance/Customize Select from your WordPress dashboard and Additional CSS department and mobile version of the website. You can switch between different versions of your website from the menu at the bottom left. Click the mobile icon to edit the mobile version of the website.
code you have to enter Additional CSS domain:
.menu-button-container {
display:none;
}
After doing that, you can see the menu disappear from the preview window. Click to save your changes. Publish When you click on the button, your mobile menu will not appear on the mobile version of your website.
Of course, you will need to change menu button container with the class of your own mobile menu.
But what if you don’t want to hide the entire menu? Hiding just a few items will make it shorter and easier to navigate for your mobile-device visitors.
Again you will need to add some CSS to the menu to hide any item. First, go to: Appearance/Menus Click from your WordPress dashboard Display Options on the top right and check CSS Classes.
Now, say we want to hide it. Set item from our Main Menu for mobile users. Now when you click on it, you will see that you have activated a labeled field. CSS Classes (optional). Here you can assign a class to a menu item. we will assign to the class hide on cell phone for Set element and Save our menu.
Within these naming conventions, you can name your classes whatever you want: a class must start with a letter (upper or lower case) and use letters, numbers, underscores, and hyphens for the rest of the name.
it’s just tags Set Item belonging to the class in our Main Menu hide on cell phone. To really hide all the elements of this class from the mobile version of the website, we need to add – you guessed it – some code to our website. Set route to Appearance/Customize Select from your WordPress dashboard and Additional CSS Episode.
The code you need to add in Additional CSS the field is:
@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}
This code hides all the elements of the file. hide on cell phone class when the width of the website is 767px or less. Of course you can do this for any menu item by hiding or showing different items for different devices.
As is common, if a theme isn’t working exactly the way you want it to, you can supplement it with a plugin. The plugin we will use is WP Mobile Menu. Keep in mind, though, that there are plenty of responsive menu plugins to choose from.
After installing and activating the plugin, you will be automatically redirected to a screen by the same developer asking you to accept some additional security features. We will skip them.
You will then be taken to the plugin’s configuration screen. first part up Main Options Episode. There, simply close both the left and right menus. Inside Visibility Settings further down, you need to switch Enable on Mobile only switch Open.
Further down, Hide Original Theme Menu section, you need to check if all menu items are hidden by the plugin.
Depending on the theme you are using, you may need to use the following. find item search if one of your menu items is unusually named and the plugin doesn’t recognize it. This may vary from theme to theme so we can’t be more specific, but most themes use traditional elements.
Once done, Save Changesand visit your website from a mobile device. You will see that the menu does not appear.
But what if you want a different version of a menu for mobile devices? Actually, that is the primary function of this plugin. In this 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 complete tutorial on adding menus in WordPress. Don’t forget to check Left Mobile Menu or Right Mobile Menu when creating mobile menu.
Still, we’ll use this field to say that a mobile menu should be narrowed down to the most basic information as much as possible. We recommend using 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’re after a particular page.
After creating and saving a menu, navigate to: Mobile Menu Options From your WordPress dashboard.
here, in Main Options section, you need to select your mobile menu to view. we named ours Mobile Menu, but you can name yours whatever you want. You can also toggle to activate the left and right menus. Note that you will need to have the menu display position checked on the menu creation screen.
next, Visibility Options Episode. These govern the conditions under which the mobile menu appears. In order to show your mobile menu, you need to make it visible on mobile devices.
Next Hide Original Theme Menu section, you can choose which menu items to hide from the mobile version. This is an effective way to create a mobile version of a menu if you know how you understand its structure. Check if the most common menu items are hidden by default.
Further down are several advanced options that allow you to further customize your mobile menu. We won’t go into details here as they are not about showing or hiding mobile menus.
you will need Save Changes when you have finished configuring your menu.
And our mobile menu only appears on the mobile version of our website with basic information. Your original mobile menu is hidden and replaced by a new one.
As a result
As we’ve shown, creating, showing, and hiding mobile menus and creating alternate versions of menus takes just a little bit of work, and there are even plugins that can do most of the work for you. No matter what type of website you are running, the majority of your visitors may be using mobile devices. While it might be a hassle for you to create a full alternative version of your website, it’s okay to do a little tweaking. So there’s no reason not to do it.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
