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 600.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 nowadays. The addition of a responsive menu for mobile 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

This is going to go into 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) that slides on the mobile screen.

demonstration menu-hosts

The first thing you need to do is to 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 plugin settings page.

responsive menu, wordpress

You must first enter the size from which the mobile menu will appear. The default value is 800 px, 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 smaller 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 change the behavior and appearance of your responsive menu. You can explore these options on the plugin settings page and adjust as needed.

2 Method: How to Add a Mobile Menu Manually

One of the more commonly used methods for displaying 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.

You must first 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 the folder of your current WordPress theme. If your theme directory does not have a js folder, then you must create one.

After downloading the JavaScript file, the next step is to make sure your WordPress website loads the JavaScript files. You will need to add the following code to the file 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.

<nav id = "site-navigation" class = "main-navigation" role = "navigation"> <button class = "menu-toggle"> Menu </ button> <? php wp_nav_menu (array ('theme_location' => ' primary ',' menu_class' => 'nav-menu')); ?> </ nav>

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

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]

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 toggle when displayed on mobile devices.

/ * 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 {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 li li: hover, .main-navigation li li li: 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 is flipping over.

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 the creation of a megamenu highly customizable, responsive, and accessible to users. It is functional after installation, without any 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 configurations.

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

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

Download in French | Demo | Web hosting

2. LMM

Liquida Mega Menu still called LMM is a WordPress plugin designed for users and developers. It has a simple and intuitive interface, built into 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, the fully customizable style for menus, customizable menu locations, the sticky menu, etc.

Download in French | Demo | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu is a premium WordPress plugin that allows you to add a canvas menu on your website, to give it a look that highlights and simple way 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

Easily create your Online Store

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

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.

Download in French | 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 not find "a CSS class for your menu". I found the style sheet css but I do not 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
5 shares
Share4
tweet
Save1