BlogThemes

How to Create a Mobile-Ready Responsive WordPress Menu

Do you wish to create a mobile-ready responsive WordPress menu? Cellular customers have already surpassed desktop customers for lots web sites. Including a cellular responsive menu makes it simpler for customers to navigate your web site. On this article, we are going to present you easy methods to simply create a mobile-ready responsive WordPress menu.

That is an in-depth tutorial. We’ll present each the plugin technique for freshmen (no coding) and the coding technique for our extra superior customers.

By the tip of this tutorial, you’ll learn to create a slide-in cellular menu, dropdown cellular menu, and a toggle cellular menu.

Prepared? Let’s get began.

Methodology 1: Add a Responsive Menu in WordPress Utilizing a Plugin

This technique is simpler and advisable for freshmen because it requires no customized coding.

On this technique, we will likely be making a hamburger menu that slides out on cellular display.

Responsive menu plugin demo

Very first thing you have to do is set up and activate Responsive Menu plugin. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.

Upon activation, the plugin will add a brand new menu merchandise labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it would take you to plugin’s settings web page.

Responsive menu settings

First you have to enter the width of display at which level the plugin will begin exhibiting responsive menu. The default worth is 800px which ought to work for many web sites.

After that, you have to choose the menu you wish to use to your responsive menu. If you happen to haven’t created a menu but, then you possibly can create one by visiting Look » Menus. See our information on easy methods to add navigation menu in WordPress for detailed directions.

Final choice on the display is to supply a CSS class to your present non-responsive menu. This can enable the plugin to cover your non-responsive menu on smaller screens.

Don’t overlook to click on on the ‘Replace Choices’ button to retailer your settings.

Now you can go to your web site and resize your browser display to see the responsive menu in motion.

Responsive menu plugin demo

The responsive menu plugin comes with many different choices which let you change habits and look of your responsive menu. You may discover these choices on plugin’s settings web page and alter them as wanted.

Methodology 2: Add a Drop Down Choose Menu Utilizing a Plugin

One other method so as to add a responsive menu is by including a drop down choose menu. This technique doesn’t require any coding abilities, so it is suggested for freshmen.

Responsive select menu

Very first thing you have to do is set up and activate the Responsive Select Menu plugin.

Select menu settings

You could scroll all the way down to ‘Activate theme places’ part. By default, the plugin is activated on all theme places. You may change that by selectively turning it on for particular theme places.

Don’t overlook to click on on the save all settings button to retailer your adjustments.

Now you can go to your web site and resize browser display to see responsive choose menu in motion.

Methodology 3: Creating Cellular Pleasant Responsive Menu with Toggle Impact

One of the crucial frequent used technique to show a menu on cellular screens is through the use of the toggle impact.

This technique requires you so as to add customized code to your WordPress recordsdata.

First you have to open a textual content editor like notepad and paste this code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
( operate() {
    var nav = doc.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }
    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }
    // Conceal button if menu is lacking or empty.
    if ( ! menu || ! menu.childNodes.size ) {
        button.type.show = 'none';
        return;
    }
    button.onclick = operate() {
        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
            menu.className = 'nav-menu';
        }
        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.substitute( ' toggled-on', '' );
            menu.className = menu.className.substitute( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )(jQuery);

Now you have to save this file as navigation.js in your desktop.

Subsequent, you have to open a FTP shopper to add this file to /wp-content/themes/your-theme-dir/js/ folder in your WordPress website.

Change your-theme-directory together with your present theme’s listing. In case your theme listing doesn’t have a js folder, then you have to create it.

After importing the JavaScript file, the following step is to ensure your WordPress website hundreds this JavaScript. You’ll need so as to add the next code to your theme’s features.php file.

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

Now we have to add the navigation menu into our WordPress theme. Normally navigation menu is added right into a theme’s header.php file.

1
2
3
4
<nav id="site-navigation" class="main-navigation" position="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'main', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

We’re assuming that the theme location outlined by your theme is known as main. If it isn’t, then use the theme location outlined by your WordPress theme.

The ultimate step is so as to add CSS in order that our menu makes use of the precise CSS courses for toggle to work when considered on cellular units.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: middle;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    shade: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    shade: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    show: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    show: inline-block;
}
// CSS to make use of on cellular units
@media display and (min-width: 600px) {
.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px strong #ededed;
        border-top: 1px strong #ededed;
        show: inline-block !necessary;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        show: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        shade: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        shade: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        place: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        place: absolute;
        high: 100%;
        z-index: 1;
        peak: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        high: 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;
        peak: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px strong #ededed;
        show: 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: regular;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        shade: #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 {
        shade: #636363;
        font-weight: daring;
    }
    .menu-toggle {
        show: none;
    }
    
    }

Now you can go to your web site and resize your browser display to see your responsive toggle menu in motion.

Toggle menu preview

Troubleshooting: Relying in your WordPress theme you could want to regulate the CSS. Use examine component instrument to determine the CSS conflicts together with your theme.

Methodology 4: Add a Slide-In Cellular Menu in WordPress

One other frequent approach so as to add a cellular menu is through the use of a slide-in panel menu (as proven in Methodology 1).

Methodology Four requires you so as to add code to your WordPress theme recordsdata, and it’s only a totally different method of engaging in the identical outcomes as Methodology 1.

First, you have to open a plain textual content editor like Notepad and add the next code to a clean textual content file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(operate($) {
$('#toggle').toggle(
    operate() {
        $('#popout').animate({ left: 0 }, 'gradual', operate() {
            $('#toggle').html('<img src="http://www.instance.com/wp-content/themes/your-theme/photographs/menu.png" alt="shut" />');
        });
    },
    operate() {
        $('#popout').animate({ left: -250 }, 'gradual', operate() {
            $('#toggle').html('<img src="http://www.instance.com/wp-content/themes/your-theme/photographs/menu.png" alt="shut" />');
        });
    }
);
})(jQuery);

Don’t overlook to exchange instance.com with your personal area identify and your-theme together with your precise theme listing. Save this file as slidepanel.js to your desktop.

Now you will want a picture which will likely be used as a menu icon. A hamburger icon is mostly used because the menu icon. One can find tons of such photographs from totally different web sites. We will likely be utilizing the menu icon from Google Materials Icons library.

As soon as you discover a picture that you simply wish to use, put it aside as menu.png.

Subsequent, you have to open a FTP shopper shopper and add slidepanel.js file to /wp-content/your-theme/js/ folder.

In case your theme listing doesn’t have the JS folder, then you have to create tit after which add your file.

After that, you have to add menu.png file to /wp-content/themes/your-theme/photographs/ folder.

As soon as the recordsdata are uploaded, we have to ensure that your theme hundreds the JavaScript file you simply added. We’ll obtain this by enqueuing the JavaScript file.

Add this code to your theme’s features.php file.

1
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Now we have to add the precise code in your theme’s header.php file to show the navigation menu. You need to search for code just like this:

1
<?php wp_nav_menu( array( 'theme_location' => 'main', 'menu_class' => 'nav-menu' ) ); ?>

You wish to wrap present navigation menu with the HTML code to show your slide panel menu on smaller screens.

1
2
3
4
5
<div id="toggle">
<img src="http://www.instance.com/wp-content/themes/your-theme/photographs/menu.png" alt="Present" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'main', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Discover that your theme’s navigation menu remains to be there. We have now simply wrapped it round HTML that we have to set off slidepanel menu.

Final step is so as to add CSS to cover the menu picture icon on bigger screens. Additionally, you will want to regulate the place of the menu icon.

Here’s a pattern CSS that you should use as an start line:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@media display and (min-width: 769px) {
#toggle {
show:none;
}
}
@media display and (max-width: 768px) {
#popout {
place: mounted;
peak: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
shade: white;
high: 0px;
left: -250px;
overflow:auto;
}
#toggle {
float: proper;
place: mounted;
high: 60px;
proper: 45px;
width: 28px;
peak: 24px;
}
.nav-menu li {
border-bottom:1px strong #eee;
padding:20px;
width:100%;
}
.nav-menu li:hover {
background:#CCC;
}
.nav-menu li a {
shade:#FFF;
text-decoration:none;
width:100%;
}
}

Relying in your WordPress theme, you could want to regulate the CSS to keep away from conflicts.

Right here is the way it regarded on our demo web site:

Responsive slide-in menu in WordPress

We hope this text helped you learn to create a mobile-ready responsive WordPress menu.

Download The WPSaviour App Now

Related posts
BlogTutorials

Slider Revolution WordPress Plugin Review & How To Guide

Tips

5 Ways to Find the Latest and Greatest Free WordPress Plugins

Tips

How E-Commerce AI is Changing WordPress Shops

Tips

10 Tips for WordPress Theme and Plugin Development

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee
Euro