Latest Tech and Tips

How to Hide a Mobile Menu in WordPress (Beginner’s Guide)

12

Do you desire to hide a mobile menu in WordPress?

Most WordPress motifs include developed-in designs that instantly change your navigating food selections right into a mobile menu. However, you might not desire to utilize the very same menu on mobile or might desire to usage a various menu design.

In this post, we will certainly reveal you how to conveniently hide a mobile menu in WordPress making use of a plugin or code approach.

Hiding a WordPress menu on mobile

Method 1. Hide a Mobile Menu in WordPress making use of a Plugin

This approach is less complicated and also is advised for newbies. We’ll utilize a plugin to hide your existing mobile menu given by your WordPress style and afterwards usage a various menu or no menu whatsoever on mobile phones.

First, you require to go to the Appearance” Menus web page and also develop a brand-new navigating menu that you would certainly such as to show on mobile phones.

Create a new menu to be used on mobile devices

On the following display, you require to give a name for your brand-new menu that aids you recognize it later on. We’ll call it‘Mobile Menu’ After that, you can choose the products you desire to include to your menu from the left column.

Adding menu items

Once you are completed including products to your menu, do not neglect to click the Save Menu switch to conserve your menu.

If you require assistance producing a brand-new navigating menu, after that follow our novice’s overview to producing a navigating menuin WordPress

Next, you require to set up and also turn on the WP Mobile Menu plugin. For even more information, see our detailed overview on how to set up a WordPress plugin.

Upon activation, you require to browse through Mobile Menu Options web page to set up plugin setups. From right here, you require to choose whether you desire to show your mobile menu on the right or to the left by transforming the toggleOn

Choose mobile menu and its direction

From the drop-down menu, choose the mobile menu you developed previously.

Next, you require to scroll down to the ‘Hide Original Theme Menu’ area. This is where you can inform the plugin to hide a mobile menu developed by your WordPress style.

Hide theme mobile menu in WordPress

By default, the plugin will certainly utilize generally made use of aspect identifiers made use of by many preferred WordPress motifs. Most customers would not require to do anything right here.

However, if the plugin stops working to hide your style’s menu, after that you can return right here and also click the ‘Find Element’ switch to merely factor to your style’s navigating menu.

Don’ t neglect to click the Save Changes switch to shop your setups.

Now that we have actually established the plugin, we require to inform WordPress website to show our mobile menu to the brand-new menu place included by the plugin.

Simply, go to the Appearance” Menus web page. Make certain the mobile menu you developed earlier is chosen in the fall menu. Below your menu product pick the place you chose in the plugin setups (e.g. Left Mobile Menu or Right Mobile Menu).

Menu location

You can currently see your internet site to see your brand-new menu in activity. The plugin will certainly currently hide your style’s mobile menu and also screen a personalized menu rather.

Mobile menu replaced

WP Mobile Menu plugin enables you to alter the shade of the menu bar, adjustment opacity, include symbols, and also much more in the setups. Feel complimentary to experiment with those setups.

Method 2. Hide Mobile Menu making use of CSS Code

This approach is a little bit sophisticated and also needs some personalized CSS to be made use of.

For this approach, you can pick to utilize 2 various strategies. You can simply hide a total mobile menu making use of CSS, or you can hide specific menu products on mobile phones.

1. Hiding a total menu on mobile phones making use of CSS

First, you require to find out the aspect you require to change making use of personalized CSS. To do that, merely go to your internet site and also take the computer mouse over to your navigating menu. After that, right click and also choose Inspect device.

Inspect tool

Your internet browser display will certainly divide right into 2, and also you’ll see the resource code of your web page. Now this navigating menu is not the one you require to target due to the fact that it shows up on the desktop computer display.

Source code while viewing your desktop menu

You require to reorganize your internet browser display by dragging it from the edge to a smaller sized dimension up until the desktop computer navigating menu is changed by the mobile menu.

Mobile menu identifier

You requirement to find out the identifier and also CSS course made use of by your WordPress navigating menu. You can do that by relocating your computer mouse on the resource code up until the menu location is highlighted.

As you can see in the screenshot over, our examination style is making use of the navbar-toggle-wrapper course.

After that, you require to go to Appearance” Customize web page in WordPress admin location to launch style customizer. Here, you require to button to the ‘Additional CSS’ tab and also click the mobile symbol near the bottom appropriate edge of the left panel.

Adding custom CSS to hide complete menu

The customizer will certainly currently reveal a sneak peek of how your website will certainly view mobile phones. You can currently get in the adhering to CSS code and also see your mobile menu vanish in the sneak peek panel.

. navbar-toggle-wrapper {
screen: none;.
}

Don’ t neglect to change the.navbar-toggle-wrapper with the identifier made use of by your WordPress style.

After that, click the ‘Publish’ switch on top to conserve your modifications.

2. Hiding certain menu products in mobile menu making use of CSS

This approach enables you to develop a navigating menu and afterwards precisely reveal or hide products that you do not desire to show on mobile or desktop computer gadgets.

The benefit of this approach is that you can utilize the very same navigating menu for mobile and also desktop computer and also merely hide the products that you do not desire to be seen.

First, you require to go to Appearance” Menus web page and also click the Screen Options switch on top right edge of the display. From right here, you require to examine package following to the ‘CSS Classes’ alternative.

Screen Options

After that. you require to scroll down to a menu product that you desire to hide on mobile phones and also click to broaden it. In the menu product setups, you’ll currently see the alternative to include a CSS course. Go in advance and also include hide-mobile CSS course there.

Add CSS class

Repeat the procedure for all menu products you do not desire to reveal on mobile.

Similarly, you can additionally click the menu products that you desire to hide on desktop. This time, include the hide-desktop CSS course rather.

Once you are completed, do not neglect to click the Save Menu switch to shop your modifications.

Now we will certainly include personalized CSS to hide these menu products. Simply go to the Appearance” Customize web page to launch the Theme Customizer and also click the Additional CSS tab.

You requirement to include the adhering to CSS code in the CSS box.

@media (min-width: 980px) {

. hide-desktop {
screen: none! essential;.
}

}

@media (max-width: 980px) {
. hide-mobile {
screen: none! essential;.
}

}

Add your custom CSS

Don’ t neglect to click the Publish switch to conserve your modifications.

You can currently see your internet site and also you will certainly see that products that you desired to hide on desktop computer are no more noticeable in the menu. Adjust your internet browser display to a smaller sized dimension and also you will certainly see the very same for the mobile menu too.

Different menus on desktop and mobile screens

We wish this post assisted you discover how to conveniently hide a mobile menuin WordPress You might additionally desire to see our post on how to develop personalized web pages in WordPress or how to develop a personalized style from the ground up without composing code.

If you liked this post, after that please subscribe to our YouTube Channel for WordPress video clip tutorials. You can additionally locate us on Twitter and also Facebook.