Do you want to create a responsive 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 many plugins to install on WordPress. et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

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.

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 settings page of the WordPress 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

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

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 the folder of your WordPress theme current. 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 need to add the navigation menu in our WordPress theme. Usually the navigation menu is added in the “ 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 ". Otherwise, use the location defined by your WordPress theme.

The last step is to add CSS so that our menu uses the right CSS classes to switch when viewed 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 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.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling 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 user-accessible megamenu. It is functional after its installation, without the need for any particular configuration.

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 into the WP dashboard, allowing you to create and customize an unlimited amount of mega menus, without any programming skills.

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.

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.

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.

• How to rename images on a WordPress blog
• How to create a floating menu on WordPress
• 8 WordPress plugins to create a megamenu on your blog
• Some tips for creating modern menus for your blog
• 6 WordPress plugins to manage categories and subcategories on your blog

Conclusion

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

...