Search

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

    Aniket Belwalkar
Listen to this article

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.

Pushy-Navigation-Menu-Wisdmlabs
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.

[space]

How to Create a Mobile Menu on 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 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.

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.

register-mobile-menu
Mobile Menu Option

[space]

 

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();
} );

[space]

Does this feel overwhelming? Let our WordPress experts do the grunt work for you and make your website mobile responsive!

Get started

 

#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;
    }
}

[space]

 

 

#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-mobile-menu
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-items
Add Mobile Menu

[space]

 

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 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!

Discuss your project for free

 

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 Master WordPress Mobile-Optimization Guide, made for people looking to create a great mobile experience for their users!

Picture of Aniket Belwalkar

Aniket Belwalkar

15 Responses

  1. Hi Aniket,

    Amazing article.
    Can you guide me in making exact replica of current mobile menu of the website?

  2. Hi Aniket … Thats a really nice article fro beginners. Dear I am finding a problem that whe I am adding the folowing code in header.php of theme. It diplaying on the frontend of the Desktop. –
    /*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 ” Mobile Menu has not been set “;
    }

    can you suggest me is that any error in this.

    1. I got the same error even after doing everything exactly. I don’t know why your using nav.desktop-menu when the menu system is using “primary” for navigation naming conventions.

  3. Hello Aniket,

    Thanks for the tutorial!

    I’m trying to do this for a Genesis site. Since I’m using a child theme, where should I add the code given at #4?

    Thanks,

    1. Hi Susanta,

      There isn’t code in Step #4. The PHP code in Step #3 should be added in header.php and the CSS code should be added in style.css

  4. Hi Aniket,
    Thank you for this helpful tutorial. I’m using a theme that comes with a mobile menu, however, it doesn’t give me the option to choose a custom menu to to add to mobile. It displays the same menu as the main menu. I have followed your steps and managed to to see the ‘Mobile Menu’ option in the menu locations, however, it still shows the main menu and not the custom ‘mobile menu’ I’ve created. Any thoughts on how to fix this?

  5. While adding the above codes to function.php my website got crashed. Webite can’t load and showing a blank page with “This page isn’t working cbshop.in is currently unable to handle this request.HTTP ERROR 500”. Now what I do?

  6. I have successfully added the mobile menu, but when I add sub-menu items I don’t get the option to open the menu. How do I go about making it so I can open the sub menus?

  7. when i put second code of step 2
    Your PHP code changes were rolled back due to an error on line 99 of file wp-content/themes/rehub/functions.php. Please fix and try saving again.

    Uncaught Error: Call to undefined function jQuery() in wp-content/themes/rehub/functions.php:99
    Stack trace:
    #0 wp-content/themes/rehub/functions.php(109): toggle()
    #1 wp-settings.php(443): include(‘/home/bearlo5/p…’)
    #2 wp-config.php(89): require_once(‘/home/bearlo5/p…’)
    #3 wp-load.php(37): require_once(‘/home/bearlo5/p…’)
    #4 wp-admin/admin.php(31): require_once(‘/home/bearlo5/p…’)
    #5 wp-admin/theme-editor.php(10): require_once(‘/home/bearlo5/p…’)
    #6 {main}
    thrown

  8. What do I do if I added a mobile menu and it shows up as the little sandwich on my mobile menu, but ever since I added some new mobile pages, they aren’t showing up when I click the hamburger button or they showed up lying on top of eachother. How do I get them to look nice again when I click the hamburger menu from the mobile or tablet version?

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads