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

1 month ago 37

Do you privation to fell a mobile paper successful WordPress?

Most WordPress themes travel with built-in styles that automatically alteration your navigation menus into a mobile menu. However, you whitethorn not privation to usage the aforesaid paper connected mobile oregon whitethorn privation to usage a antithetic paper style.

In this article, we volition amusement you however to easy fell a mobile paper successful WordPress utilizing a plugin oregon codification method.

Hiding a WordPress paper   connected  mobile

Method 1. Hide a Mobile Menu successful WordPress utilizing a Plugin

This method is easier and is recommended for beginners. We’ll usage a plugin to fell your existing mobile paper provided by your WordPress taxable and past usage a antithetic paper oregon nary paper astatine each connected mobile devices.

First, you request to sojourn the Appearance » Menus leafage and make a caller navigation paper that you would similar to show connected mobile devices.

Create a caller   paper   to beryllium  utilized  connected  mobile devices

On the adjacent screen, you request to supply a sanction for your caller paper that helps you place it later. We’ll telephone it ‘Mobile Menu’. After that, you tin prime the items you privation to adhd to your paper from the near column.

Adding paper   items

Once you are finished adding items to your menu, don’t hide to click connected the Save Menu fastener to prevention your menu.

If you request assistance creating a caller navigation menu, past travel our beginner’s usher to creating a navigation paper successful WordPress.

Next, you request to instal and activate the WP Mobile Menu plugin. For much details, spot our measurement by measurement usher connected how to instal a WordPress plugin.

Upon activation, you request to sojourn Mobile Menu Options leafage to configure plugin settings. From here, you request to prime whether you privation to show your mobile paper connected the close oregon to the near by turning the toggle On.

Choose mobile paper   and its direction

From the drop-down menu, prime the mobile paper you created earlier.

Next, you request to scroll down to the ‘Hide Original Theme Menu’ section. This is wherever you tin archer the plugin to fell a mobile paper created by your WordPress theme.

Hide taxable   mobile paper   successful  WordPress

By default, the plugin volition usage commonly utilized constituent identifiers utilized by most fashionable WordPress themes. Most users wouldn’t request to bash thing here.

However, if the plugin fails to fell your theme’s menu, past you tin travel backmost present and click connected the ‘Find Element’ fastener to simply constituent to your theme’s navigation menu.

Don’t hide to click connected the Save Changes fastener to store your settings.

Now that we person acceptable up the plugin, we request to archer WordPress site to show our mobile paper to the caller paper determination added by the plugin.

Simply, spell to the Appearance » Menus page. Make definite the mobile paper you created earlier is selected successful the driblet down menu. Below your paper point take the determination you selected successful the plugin settings (e.g. Left Mobile Menu oregon Right Mobile Menu).

Menu location

You tin present sojourn your website to spot your caller paper successful action. The plugin volition present fell your theme’s mobile paper and show a customized paper instead.

Mobile paper   replaced

WP Mobile Menu plugin allows you to alteration the colour of the paper bar, alteration opacity, adhd icons, and much successful the settings. Feel escaped to play astir with those settings.

Method 2. Hide Mobile Menu utilizing CSS Code

This method is simply a spot precocious and requires immoderate customized CSS to beryllium used.

For this method, you tin take to usage 2 antithetic approaches. You tin conscionable fell a implicit mobile paper utilizing CSS, oregon you tin fell idiosyncratic paper items connected mobile devices.

1. Hiding a implicit paper connected mobile devices utilizing CSS

First, you request to fig retired the constituent you request to modify utilizing custom CSS. To bash that, simply spell to your website and instrumentality the rodent implicit to your navigation menu. After that, close click and prime Inspect tool.

Inspect tool

Your browser surface volition divided into two, and you’ll spot the root codification of your webpage. Now this navigation paper is not the 1 you request to people due to the fact that it is disposable connected the desktop screen.

Source codification  portion    viewing your desktop menu

You request to rearrange your browser surface by dragging it from the country to a smaller size until the desktop navigation paper is replaced by the mobile menu.

Mobile paper   identifier

You request to fig retired the identifier and CSS people utilized by your WordPress navigation menu. You tin bash that by moving your rodent connected the root codification until the paper country is highlighted.

As you tin spot successful the screenshot above, our trial taxable is utilizing the navbar-toggle-wrapper class.

After that, you request to spell to Appearance » Customize leafage successful WordPress admin country to motorboat taxable customizer. Here, you request to power to the ‘Additional CSS’ tab and click connected the mobile icon astatine the bottommost close country of the near panel.

Adding customized  CSS to fell  implicit   menu

The customizer volition present amusement a preview of however your tract volition look connected mobile devices. You tin present participate the pursuing CSS codification and spot your mobile paper vanish successful the preview panel.

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

Don’t hide to regenerate the .navbar-toggle-wrapper with the identifier utilized by your WordPress theme.

After that, click connected the ‘Publish’ fastener astatine the apical to prevention your changes.

2. Hiding circumstantial paper items successful mobile paper utilizing CSS

This method allows you to make a navigation paper and past selectively amusement oregon fell items that you don’t privation to show connected mobile oregon desktop devices.

The vantage of this method is that you tin usage the aforesaid navigation paper for mobile and desktop and simply fell the items that you don’t privation to beryllium seen.

First, you request to spell to Appearance » Menus leafage and click connected the Screen Options fastener astatine the apical close country of the screen. From here, you request to cheque the container adjacent to the ‘CSS Classes’ option.

Screen Options

After that. you request to scroll down to a paper point that you privation to fell connected mobile devices and click to grow it. In the paper point settings, you’ll present spot the enactment to adhd a CSS class. Go up and adhd .hide-mobile CSS people there.

Add CSS class

Repeat the process for each paper items you don’t privation to amusement connected mobile.

Similarly, you tin besides click connected the paper items that you privation to fell connected desktop computers. This time, adhd the .hide-desktop CSS people instead.

Once you are finished, don’t hide to click connected the Save Menu fastener to store your changes.

Now we volition adhd customized CSS to fell these paper items. Simply spell to the Appearance » Customize leafage to motorboat the Theme Customizer and click connected the Additional CSS tab.

You request to adhd the pursuing CSS codification successful the CSS box.

@media (min-width: 980px){ .hide-desktop{ display: nary !important; } } @media (max-width: 980px){ .hide-mobile{ display: nary !important; } }

Add your customized  CSS

Don’t hide to click connected the Publish fastener to prevention your changes.

You tin present sojourn your website and you volition announcement that items that you wanted to fell connected desktop are nary longer disposable successful the menu. Adjust your browser surface to a smaller size and you volition announcement the aforesaid for the mobile paper arsenic well.

Different menus connected  desktop and mobile screens

We anticipation this nonfiction helped you larn however to easy fell a mobile paper successful WordPress. You whitethorn besides privation to spot our nonfiction connected however to create customized pages successful WordPress oregon how to make a customized taxable from scratch without penning code.

If you liked this article, past delight subscribe to our YouTube Channel for WordPress video tutorials. You tin besides find america connected Twitter and Facebook.

Original Story