Skip to Main Content

How to create a responsive menu for mobile WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Would you like to create a responsive mobile menu on your WordPress blog?

Mobile users outnumber desktop users these days. Adding a responsive mobile menu makes it easier for users to navigate your website.

In this tutorial, we will show you how to easily create a responsive menu on WordPress.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to create responsive mobile wordpress menu

Here it will be a question of going in depth by showing you both the method with a plugin for beginners and the coding method for advanced users.

First method: Create a mobile menu with a WordPress plugin

This method is easier and recommended for beginners because it does not require any special coding skills.

In this method, we will create a menu (with a hamburger icon) which slides on the mobile screen.

WordPress responsive menu plugin

The first thing you need to do is install and activate the WordPress Responsive Menu plugin . For more details, check out our guide on how to install a WordPress plugin .

After activating the plugin, the plugin will add a new item on the menu, titled " Responsive Menu ". Clicking on it will take you to the WordPress plugin settings page.

WordPress responsive dashboard menu plugin

You must first enter the size from which the mobile menu should appear. The default is 800px, which should work for most websites.

After that you have to select the menu you want to use on mobile.

The last option on the screen allows you to provide a CSS class for your menu. This will allow the plugin to hide your non-responsive menu on small screens.

Do not forget to click on « Update Options To save your settings.

We also suggest you to discover our 10 WordPress plugins to create menus on your blog

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

You can now visit your website and resize your browser screen to see the responsive menu in action.

Site-in-action-menu-responsive-to-mobile

The plugin « Responsive Menu »Offers many other options that allow you to modify the behavior and appearance of your responsive menu. You can explore these options on the plugin's settings page and adjust it as needed.

2 Method: How to Add a Mobile Menu Manually

One of the most common methods used to display a menu on mobile screens is to use leverage.

This method requires you to add custom code to your WordPress files.

In one of our previous tutorials, we show you how to create a WordPress plugin.

First you need to open a text editor like Notepad and paste this code.

(function () {nav var = document.getElementById ('site-navigation'), button, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Hide button if menu is missing or empty if (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Now you have to save this file with the name " navigation.js On your desk.

Then you need to open an FTP client to download this file to the "/ wp-content / themes / your-theme / js /" location on your WordPress website.

Replace the expression " your-theme With the name of your current WordPress theme folder. If your theme directory doesn't have a js folder then you need to create one.

After uploading the JavaScript file, the next step is to make sure that your WordPress website will load the JavaScript files. You will need to add the following code to the " functions.php Of your WordPress theme.

Discover something else What can you do with the functions.php file?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', true.);

Now we have to add the navigation menu in our WordPress theme. Usually the navigation menu is added to the file " header.php Of your WordPress theme.

Menu 'primary', 'menu_class' => 'nav-menu')); ?>

We assume that the menu location defined by your WordPress theme is called " primary ". Otherwise, use the location defined by your WordPress theme.

Discover also our 5 WordPress plugins to create subscription forms

The last step is to add CSS so that our menu uses the right CSS classes to switch when viewed on mobile devices.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

/ * Navigation Menu * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; text-align: center; } .main-navigation li {margin-top: 24px; margin-top: 1.714285714rem; font-size: 12px; font-size: 0.857142857rem; line-height: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS to use on mobile devices @media screen and (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; border-top: 1px solid #ededed; display: inline-block! important; text-align: left; width: 100%; } .main-navigation ul {margin: 0; text-indent: 0; } .main-navigation li a, .main-navigation li {display: inline-block; text-decoration: none; } .main-navigation li a {border-bottom: 0; color: # 6a6a6a; line-height: 3.692307692; text-transform: uppercase; white-space: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; position: relative; } .main-navigation li ul {margin: 0; padding: 0; position: absolute; top: 100%; z-index: 1; height: 1px; width: 1px; overflow: hidden; clip: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; left: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; clip: inherit; overflow: inherit; height: inherit; width: inherit; }. main-navigation li ul li a {background: #efefef; border-bottom: 1px solid #ededed; display: block; font-size: 11px; font-size: 0.785714286rem; line-height: 2.181818182; padding: 8px 10px; padding: 0.571428571rem 0.714285714rem; width: 180px; width: 12.85714286rem; white-space: normal; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; color: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; font-weight: bold; } .menu-toggle {display: none; }}

You can now visit your website and resize your browser screen to see if your responsive menu toggles.

Rocking-menu-wordpress-tutorial

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. UberMenu

UberMenu is a WordPress plugin dedicated to creating a highly customizable, responsive, and accessible to users megamenu. It is functional after its installation, without the need for special configuration.

Ubermenu wordpress mega menu plugin

It's an easy-to-use plugin, yet powerful enough to create highly customizable and creative mega menu layouts.

See also our 9 WordPress plugins to create price grids on a blog

You will find among others: 3 menu templates, fully responsive layout, compatibility with mobile devices (iPhone, iPad, Android), touch support, etc ...

Download | Demo | Web hosting

2. LMM

Liquida Mega Menu also called LMM is a WordPress plugin designed for users and developers. It has a simple and intuitive interface, integrated with the WP dashboard, allowing you to create and customize an unlimited amount of mega menus, without any programming skills.

Lmm wordpress responsive mega menu based on bootstrap

It comes with dozens of features, whether for regular or advanced users. As functionalities, it offers among others: automatic and manual integration, support for multisite, taking care of children's themes, completely customizable style for menus, customizable menu locations, sticky menu, etc.

Download | Demo | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu is a premium WordPress plugin that allows you to add a canvas menu to your website, in order to give it a look that highlights and easily your information. It uses the default WordPress menu function to create its menus.

8degree fly menu responsive off menu menu plugin for wordpress

You will be able to add additional elements to the default menu items, such as icons, menu slogans, a pseudo-grouping header, and a long description.

Read also : 10 WordPress plugins to optimize sidebars and sticky headers

It also comes with a WYSIWYG editor to help you grasp your long description in a user-friendly way. With this editor you can also use shortcodes.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download | Demo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

Here ! That's it for this tutorial, I hope it will allow you to create a menu for mobile users. Feel free to share the tip with your friends on your social networks.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...

This article features 2 comments

  1. Hello

    thank you for your information

    I can't seem to find "a CSS class for your menu". i found the css stylesheet but i dont know what to copy and paste

    thank you in advance for your help

    have a nice week end

    michel

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
6 shares
Share4
tweet
Save2