How to Hide a Mobile Menu in WordPress: A Beginner‘s Guide

Hey there, WordPress user! Are you frustrated with your theme‘s default mobile menu? Maybe it doesn‘t match your site‘s branding, or perhaps it‘s just not user-friendly. Fear not, because today I‘m going to walk you through how to easily hide that pesky mobile menu and create a custom one that your visitors will love.

Navi.

Why Customize Your WordPress Mobile Menu?

Before we dive into the how-to, let‘s talk about why you should even bother customizing your mobile menu. Here are a few compelling reasons:

Mobile usage is skyrocketing. Over 50% of web traffic worldwide comes from mobile devices (Statista), so it‘s crucial that your site provides a great mobile experience.
Navigation is key to user experience. Your mobile menu is often the first thing visitors interact with on your site. If it‘s confusing or difficult to use, they may get frustrated and leave.
Branding matters. Your mobile menu should align with your site‘s overall design and branding. A clashing or generic mobile menu can make your site look unprofessional.
Less is more. Mobile screens are small, so a streamlined menu with fewer options is often better than trying to cram in every link from your desktop menu.

By customizing your mobile menu, you can improve your site‘s usability, branding, and overall mobile experience. So, let‘s get started!

Method 1: Hide Mobile Menu Using a Plugin

If you‘re not comfortable with code, using a plugin is the easiest way to hide your theme‘s default mobile menu and create a custom one. Here‘s a step-by-step guide using the free WP Mobile Menu plugin:

Step 1: Install and Activate WP Mobile Menu

From your WordPress dashboard, go to Plugins → Add New.
Search for "WP Mobile Menu" in the search bar.
Click "Install Now" and then "Activate".

Step 2: Create a Custom Mobile Menu

Go to Appearance → Menus.
Click "Create a new menu" and give it a name (e.g. "Mobile Menu").
Add the items you want to include in your mobile menu.
Click "Save Menu".

Step 3: Configure WP Mobile Menu Settings

Go to Mobile Menu → Options.
Under "Menu", select the custom menu you created in Step 2.
Customize your menu‘s appearance (colors, font, icons, etc.) using the various settings.
If your theme‘s default mobile menu is still showing, go to "Display" settings and click "Find Element" to hide it.
Save your changes.

That‘s it! Your custom mobile menu will now appear on mobile devices, and your theme‘s default mobile menu will be hidden.

Method 2: Hide Mobile Menu Using Code

If you‘re comfortable editing your theme‘s code, you can hide your mobile menu and create a custom one using CSS and HTML. Here‘s how:

Option 1: Hide the Entire Mobile Menu

Open your theme‘s stylesheet (style.css) or Custom CSS area.
Find the CSS selector for your theme‘s mobile menu (e.g. .mobile-menu).
Add the following CSS to hide the menu:

.mobile-menu {
  display: none !important;
}

Save your changes.

If you want to create a new mobile menu to replace the hidden one, you can add a custom HTML menu to your theme and use CSS to show/hide it based on screen size:

<nav class="custom-mobile-menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>  
</nav>

.custom-mobile-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .custom-mobile-menu {
    display: block;
  }
}

Option 2: Hide Specific Menu Items

Go to Appearance → Menus.
Enable CSS classes for menu items (Screen Options → CSS Classes).
Add a unique class to each menu item you want to hide (e.g. hide-mobile).
Open your theme‘s stylesheet or Custom CSS area and add:

@media screen and (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

Now those menu items will be hidden on screens smaller than 768px (most smartphones).

Tips for a User-Friendly Mobile Menu

Now that you know how to hide and customize your WordPress mobile menu, here are some best practices to keep in mind:

Keep it simple. Only include the most important links and limit submenus.
Make it easy to tap. Ensure menu items are large enough for finger taps and have ample spacing.
Use clear labels. Avoid jargon or vague wording. Stick to short, descriptive labels.
Provide an easy way out. Always give users a way to close the menu or go back to the previous level.
Test on real devices. Don‘t rely solely on responsive previews. Test on actual smartphones and tablets.

By following these guidelines, you can create a mobile menu that‘s intuitive and enjoyable to use.

Common Mobile Menu Mistakes to Avoid

While we‘re on the topic of user-friendly mobile menus, let‘s cover a few common mistakes to steer clear of:

Too many options. A mobile menu isn‘t the place to include every single page and link. Stick to the essentials.
Tiny tap targets. If your menu items are too small or crowded, users will struggle to tap the one they want. Apple recommends a minimum tap target size of 44px by 44px.
Unclear or cutoff labels. Avoid using labels that are too long or vague. Make sure they‘re fully visible and easy to understand at a glance.
No way to close the menu. Don‘t make users struggle to figure out how to close the menu or go back. Include a clear "Close" or "Back" button.
Poor contrast. If your menu text is too light or blends in with the background color, users will struggle to read it. Ensure ample contrast between text and background.

By avoiding these pitfalls, you can create a mobile menu that‘s not only visually appealing but also highly functional.

Wrapping Up

Phew, that was a lot of information! But hopefully you now feel equipped to hide your WordPress theme‘s default mobile menu and create a custom one that perfectly fits your site‘s needs.

Just remember, whether you choose to use a plugin or code, the goal is to create a mobile menu that‘s easy to use, aligns with your branding, and provides a great experience for your mobile visitors.

For further reading and inspiration, check out these resources:

Happy customizing, and may your mobile menus be user-friendly and delightful!