4 Easy Steps to Adding a Mobile Menu on your WordPress Website

Responsive. Mobile friendly. Mobile ready.

You must have come across one of these terms while building your WordPress website. A mobile friendly, responsive theme is quite imperative considering nearly 50% of your visitors are bound to view it on a mobile device.

So why should your website’s menu be left behind? 😀

Now, the way the menu is displayed is one part of making the menu responsive. So, if your primary navigation menu is in the form of a list on a desktop device, the same menu can be displayed as a hamburger menu on a mobile device.

We have a great article here, which explains ‘How to Add Pushy Navigation Menu‘ in your theme.

But! To make the menu mobile friendly, you might want to alter the content that is displayed in the menu.

For example, the WisdmLabs website! If you take a look at the website on a mobile device (or if you’re on one right now), you’ll notice that the main menu is not a mega menu. On the other hand, the main menu on a desktop device is a downright mega menu.

Mobile Navigation Menu on Our Site

Now, to display a different menu on a mobile device, your theme needs to allow you to create a DIFFERENT MOBILE MENU.

How to Create a Mobile Menu in Your WordPress website

To add a mobile specific menu, you need to do the following:

1. Register a mobile menu
2. Toggle the display based on screen width
3. Ensure mobile menu display
4. Create and set a mobile menu

All you need, is just a little knowledge of jQuery and some PHP coding and you have endless possibilities.

The files for which the changes is to be made are as follows:

#1 Register a Mobile Menu

If your WordPress theme does not already provide you a mobile menu, you can register one using the below code. You can add the code to functions.php of your child theme or a custom plugin.

// register a mobile menu
function wdm_register_mobile_menu() {
    add_theme_support( 'nav-menus' );
    register_nav_menus( array('mobile-menu' => __( 'Mobile Menu', 'wdm' )) );
}
add_action( 'init', 'wdm_register_mobile_menu' );

Once you have added this code, you should notice a ‘Mobile Menu’ option in the menu settings.

Mobile Menu Option

#2 Toggle Menu Display

Now, the menu has to be displayed only on a mobile device. Hence we need to toggle its appearance based on the screen size or browser width. For this, we’ll be dabbling with some jQuery.

Make sure you add this below code in a JS file that is loaded on every page. If you don’t know of one, you can add the code to a ‘mobile-menu-toggle.js’ and load it on every page using the below code:

(Add the code to functions.php of your child theme or a custom plugin)

// load the JS file
function wdm_mm_toggle_scripts() {
    wp_enqueue_script( 'wdm-mm-toggle', get_stylesheet_directory_uri() . '/js/mobile-menu-toggle.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'wdm_mm_toggle_scripts' );

Once you enqueue the script, it will be loaded on every page. You now have to add the below JS code in it.

So, add the below code to ‘mobile-menu-toggle.js’.

// hide or display the mobile menu

/* let's consider we want to toggle the menu displayed at 800 screen width, here's what we need to do (you can accordingly replace 800 with to a screen width you would need)..*/
function toggle() {
    if ( jQuery( window ).width() >= 800 ) {
      jQuery( '.nav.mobile-menu' ).hide();
      jQuery( '.nav.desktop-menu' ).show();
    } else {
      jQuery( '.nav.desktop-menu' ).hide();
      jQuery( '.nav.mobile-menu' ).show();
    }
}

// on page load set the menu display initially
toggle();

// toggle the menu display on browser resize
jQuery( window ).resize( function () {
    toggle();
} );

#3 Ensure that Mobile Menu is Displayed

There is one final step we need to follow, so as to ensure the menu is seamlessly displayed. This step basically takes care of displaying the mobile menu, once it is set in the menu settings. This code needs to be added in your current theme’s header.php. You can add it below the ‘wp_nav_menu’ function after the ‘main-menu’ has been added.

/* The below code checks if a mobile-menu is set from the backend in the menu settings. If a menu has been set it will be displayed in the header. Or else, a menu has not been set then display a message.*/
if ( function_exists('has_nav_menu') && has_nav_menu('mobile-menu') ) {
    wp_nav_menu( array(
      'depth' => 6,
      'sort_column' => 'menu_order',
      'container' => 'ul',
      'menu_id' => 'main-nav',
      'menu_class' => 'nav mobile-menu',
      'theme_location' => 'mobile-menu'
    ) );
    } else {
       echo "<ul class='nav mobile-menu'> <font style='color:red'>Mobile Menu has not been set</font> </ul>";
}

Make sure that you add a ‘desktop-menu’ as an additional class to the primary menu. This class will be used to toggle the display of the menu.

Of course this has to be supported with a bit of CSS as well. Add the below CSS to style.css of your child theme.

.mobile-menu{
    display: none;
}
@media only screen and (min-width: 800px){
    .desktop-menu{
        display: block !important;
    }
    .mobile-menu{
        display: none !important;
    }
}

@media only screen and (max-width: 799px){
    .desktop-menu{
        display: none !important;
    }
    .mobile-menu{
        display: block !important;
    }
}

#4 Create and Set the Mobile Menu

Once we’ve created a mobile menu setting, and toggled the display, we need to create a menu and set it as the mobile menu.

For this, create a new menu in your WordPress admin panel.

Create a new menu

Now, add the menu items and set it as the mobile menu. Remember to save the changes made.

Add Mobile Menu

And there you have it! You have just added a mobile menu in your WordPress theme! Quite simple wasn’t it. You can similarly add different menus, based on different screen sizes, or register a footer menu. (If you don’t know how set a footer menu, this article will surely help).

If this article has helped you or if you still have some doubts be sure to drop me a line using the comment section below 🙂

Bonus: Here is the The Master WordPress Mobile-Optimization Guide, made for people looking to create a great mobile experience for their users!

• WordPress Tips & Tricks
• With tags: Mobile Menu, Theme Customization

Share:

• Aniket B

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!