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

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. Implementing a WordPress mobile menu without a plugin ensures optimal navigation for these users.

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.

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

While there are various WordPress mobile menu plugins available, this guide focuses on creating a custom mobile menu without relying on plugins. Alternatively, plugins like WP Responsive Menu can simplify the process of creating a mobile-friendly menu.

How to Create a Mobile Menu on Your WordPress Website

To add a mobile-friendly menu in WordPress, you need to do the following. If you’re interested in creating a dynamic navigation menu, refer to our guide on how to create a simple and dynamic navigation menu in WordPress.

1. Register a mobile menu
2. Toggle the display based on the screen width
3. Ensure the 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. For advanced customization, learn how to add buttons and menu options to TinyMCE in WordPress.

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.

 

Not a developer? Let our experts do the grunt work for you!

Make your site mobile responsive!

 

#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 the 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, 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.

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

Conclusion

And there you have it! You have just added a mobile menu to 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 to set a footer menu, this article will surely help).

If you want to add a mobile menu to your WordPress site without doing the code work, let our WordPress development experts who are also WordPress core contributors make the job easy for you. They use scalable code and make sure your site is optimized for fast loading times both on mobile and desktop!

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

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