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:
- Register a mobile menu
- Toggle the display based on screen width
- Ensure mobile menu display
- 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!
Maria Serbus :
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?
Chris Calabrese :
Does this technique still work on 2019 wordpress?
Robin Tomar :
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
Haig Hamamgain :
I got it working, however I get the menu without toggling. There is no button to toggle. What is wrong?
Drew :
I don’t believe I can find: ‘mobile-menu-toggle.js’.
takanakui :
You guys might want to give it a try in WP Mobile Menu. It’s free and easy to use.
Rachel :
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?
Amit Das :
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?
Tejas Jadhav :
Have you got it solved??
Isabel F :
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?
Susanta Kumar Sahoo :
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,
Aniket B :
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
R K Shrivastaw :
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.
Auggie :
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.
JS :
Hi Aniket,
Amazing article.
Can you guide me in making exact replica of current mobile menu of the website?