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

According to Statista, there were 4.32 billion mobile internet users in 2021. This represents 90% of internet users globally. As mobile phones become more accessible, the number of mobile internet users is expected to grow exponentially.

Catering to the mobile internet users means you need to make your WordPress-powered website mobile-friendly or responsive. One way of improving responsiveness is by creating mobile-friendly menus for your WordPress site.

Here is everything you need to know about creating a WordPress responsive menu without using any plugins.

Creating a Mobile Menu for Your WordPress Website

To create a WordPress responsive menu, you must execute the following 4 steps:

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

To execute these steps, you will need working knowledge of jQuery and PHP coding. Let’s discuss each of these 4 steps in detail.

Step 1 – Register a Mobile Menu.

This step is only required if your current WordPress theme does not provide the mobile menu functionality. To register a mobile menu:

1. Add the “Add Register Mobile Menu” (or “wdm_register_mobile_menu”) function in the “functions.php” file of your current theme (or child theme).
2. Specify the “Mobile Menu” option in the “register_nav_menus” method within this function.

Once you have made this change, you should be able to view the “Mobile Menu” checkbox in your WordPress menu settings.

Step 2 – Toggle the display based on screen width.

In the next step, you need to ensure that the registered mobile menu is displayed only on mobile devices. For this, you need to toggle the menu appearance based on screen (or browser) width.

You can add the “Toggle Display” code either to:

• All the JavaScript files loaded for every webpage on your WordPress site.
• The “mobile-menu-toggle.js” file and then load this JavaScript file on every webpage.

To toggle the display:

1. Add the “Toggle Scripts” (or “wdm_mm_toggle_scripts”) function in the “functions.php” file of your current theme (or child theme).
2. Enqueue the added script on every webpage.
3. Add the “Toggle” function (with jQuery) to the “mobile-menu-toggle.js” file. This function can be used to toggle the menu (between Show and Hide) for the Desktop and Mobile menu at the specified screen width.

Step 3 – Ensure the Mobile menu is displayed.

With this next step, you need to ensure that the mobile website menu is displayed on your mobile device. To perform this step:

1. Add the “wp_nav_menu” function (after the main menu) in the “header.php” file of your current theme (or child theme). In this function, you can configure parameters such as menu depth, column sorting, menu ID and location, and the theme location.
2. Add the “Desktop menu” as an additional class to the main menu. This class can be used to toggle the menu display.
3. Using the “style.css” file of your child theme, add the CSS function for displaying (or blocking) the desktop and mobile menu.

Step 4 – Create and set a mobile menu.

Now that you have created the mobile menu and configured its toggle settings, the last step is to create and set the mobile menu. Here is what you need to do:

1. Create a new menu from your WordPress admin panel.
2. Define the menu items for the created mobile menu. Drag each of the following menu options in the desired menu order:
   1. Home
   2. Registration
   3. Promotions
   4. Jobs
   5. Contact Us

You can also choose to automatically add new top-level pages to this new menu.

Conclusion

Through this article, we have discussed how to add a WP mobile menu to your website without using a WordPress mobile menu plugin. Mobile menus can improve your website responsiveness on any mobile device. Using the four steps outlined above, you can create different mobile menus that cater to different screen sizes.

Since its inception, Flipper Code has specialized in solutions for the WordPress ecosystem, offering a wide range of services in website development, plugin development,  and WooCommerce development. We have developed a large number of WordPress plugins that can be customized to various business requirements.

Our experienced team of WordPress experts can provide all the assistance that you need. Interested? Contact us with a direct message or send us an email at hello@flippercode.com.