4 Easy Methods to Create a Mobile-Ready Responsive WordPress Menu

4 Easy Methods to Create a Mobile-Ready Responsive WordPress Menu

Have you ever desired to Create a Mobile-Ready Responsive WordPress Menu? The Mobile users have already cross Desktop users for many of the websites.

But, adding a mobile responsive menu makes it very easy for the users to navigate your site.

However, in today’s post, we will illustrate you the same process of developing a mobile-friendly WordPress Menu.

Likewise, we will represent you both the plugin methods, namely, for the beginners (which does not require coding) and the coding method for our advanced users.

Hence, until the end of this guide, you will come to know how to develop a slide-in mobile menu, toggle mobile menu, and dropdown mobile menu.

Why Your WordPress Menu Needs To Be Mobile-Ready Responsive

Indeed, a mobile responsive menu website is one whose page and elements can be viewed in any of the devices. However, such website’s are the utmost importance to increase the traffic to a site.

Thus, to be entirely honest, it takes a lot of efforts to make sure that a site works well on a mobile device. After all, there are so many browsers and resolutions to be considered.

Hence, for this issue, we brought the 4 Easy Methods to Create a Mobile-Ready Responsive WordPress Menu.

So Why Should Your Website’s Menu Be Left Beyond?

Not at all! However, the way the menu is displayed is a part of making the menu responsive. Therefore, if your primary navigation menu is in the form of a list on a desktop device, then the same menu can be displayed as a hamburger menu on a mobile device.

Although, to make the menu mobile friendly you’ll want to change the content i.e, displayed in the menu.

For example, the Wpglobalsupport website! Hence, If you have a look at the site on a mobile device. Then, you will notice that the main menu is not a mega menu. However, on the other hand, the main menu on a desktop device is a downright mega menu.

Use The Themes For Your Responsive Menu

However, this is one of the easiest methods to implement a stylish and responsive menu is by using a right theme over it. Today many developers will make it a part of the overall design of the theme.

Despite few, not everyone will take the time to include responsive menus. Hence, to test whether your menu supports the responsive design follow the path Appearance area >> Admin Panel.

Thereafter, search the icons to illustrate you what the theme looks like in similar devices. The icons for this will be named as desktop, tablet, and smartphones. Hence, press either of the icons to represent what the theme looks like.

Thus, to illustrate a different menu on a mobile device. Then, your theme needs to allow you to develop a separate mobile menu. Thereafter, your website will be Mobile-Ready Responsive.

Advice for Making Your WordPress Menu Mobile-Friendly

So, before we get to the actual methods that will help you to create a WordPress menu. Let’s have a quick look at some usability tips for better catering to mobile-users:

  • Reduce The Number Of Menu Items
    However, for the better accommodate small screen devices, try removing non-essential items from your mobile-only menu.
  • Minimize The Amount Of Clicks Required
    Further, the other option is to minimize the amount of clicks required. Hence, try limiting the layers of your WordPress Menus.
  • Maximize Screen Real Estate
    Finally, nesting, expanding, and contracting drop-down menus is a great method to avoid white space problem. Hence, use the universal three line “Nav Burger” icons to signal the menu locations.

Indeed a survey by Google stated that a bad site experience on a mobile device might hurt your perception of the brand.

Now, let’s consider the methods of creating a mobile ready responsive menu.

Creating a Mobile-Ready Responsive WordPress Menu

Let’s get cracked!

Method 1: Add a Responsive Menu in WordPress Using a Plugin

Well, the method is for beginners, however, this plugin method is often very easy and recommended. And it is so because it does not require any of the custom codings.

Consequently, In this method, we will create a hamburger menu that slides onto the mobile screen.

rpmenuplugin

Thereafter, the very first thing you need to do is install the Responsive Menu plugin and then activate it.

After the activation of plugin, it will add a new menu item labeled as “Responsive Menu” in WordPress Admin Bar.

Whereas, if the menu item didn’t get added to the admin bar area. Then, you need to refollow the entire process of installing the plugin.

However, if the menu item labeled as responsive menu got added. Then, click on the same, it will take you to the settings page of the plugin. Further, select the menu which you want to use for your responsive menus. However, needless to say, if you have not created a menu yet, then, you can create one by following the path as Appearance >> Menu.

responsivemenusettings

Finally, the last option on the screen is to provide a CSS class for your current non-responsive menu. However, It will permit the plugin to hide your non-responsive menu on a smaller screen.

Hence, remember to click the ‘Update Options” button to save your settings.

After that, you can go to your website and resize your browser screen to see the responsive menus in action.

rpmenuplugin (1)

Whereas, this option allows you to change the appearance and the behavior of your responsive menu.

Consequently, you can find these options on the settings page of the plugin and adjust them as per your requirements.

Method 2: Add a Drop Down Select Menu Using a Plugin

Particularly, in this method, we add a drop-down select menu to create a Mobile-Ready Responsive WordPress Menu.

However, this method too does not require any coding skills. Therefore, it is also a recommended method for beginners.

selectmenu

Thus, the very first thing you need to do is install the Responsive Select Menu plugin and then activate it. Further, if you are not very aware of installing the plugin. Then, feel free to move along with our blog on How to Install a Plugin in WordPress.

Thereafter, you have to follow the path as illustrated Appearance >> Select. Following this path, you need to configure the plugin settings.

selectmenu

Further, you will require scrolling down to the “Activate Theme Location” section. Whereas, by default, the plugin is activated at all the theme locations. After that, the thing you need to remember is to click the save all settings button to save your changes.

Finally, you can move to your website and resize browser screen to see the responsive select menu in action.

Method 3: Creating a Mobile Friendly Responsive Menu with Toggle Effect

However, this is one of the most commonly used methods. To illustrate you a menu on a mobile screen by using the toggle effect.

However, In this method, you need to add custom code to your WordPress files. If you have not done this before, have a look at our guide on Pasting the Snippet from the Web in WordPress.

Thereafter, you need to open a text editor such as Notepad and paste this code:

( function()

{
var nav = 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);

Further, you have to save this file as navigation.js on your desktop.

After that, you have to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

Although, change your-theme-directory with your current theme’s directory. However, if you do not have a js folder in your theme directory, then, you’ll need to create it.

Consequently, after uploading the javascript file, the next step is to ensure that your WordPress website loads this javascript. Very often, you will have to add the following code to the functions.php file of your theme.

wp_enqueue_script( ‘wpb_togglemenu’, get_template_directory_uri() . ‘/js/navigation.js’, array(‘jquery’), ‘20160909’, true );

Finally, we have to add the navigation menu to our WordPress theme. However, after adding the navigation menu to the theme’s header.php file save it.

<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>

Also, we are assuming that the theme location defined by your theme is called primary. Whereas, If not, use the theme location as determined by your WordPress theme.

Hence, the last step is to add CSS (Cascading Style Sheets.) So that our menu can use the right CSS classes to toggle to work 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;
}

}

Also, you may need to adjust the CSS depending on your WordPress theme. Therefore, inspect the element tool to detect CSS conflict with your theme.

Troubleshooting:
Finally, you can go to your website and resize your browser screen to view your responsive toggle menu in action.

Mobile-Ready Responsive WordPress Menu

Method 4: Adding Slide-In Mobile Menu in WordPress

However, another common technique for adding a mobile menu is using the slide-in panel menu (shown in method 1).

Whereas for method 4, you need to add code to your WordPress theme files. Conversely, this is a different way of accomplishing the same result as method 1.

Consequently, you will have to open a plain text editor like Notepad. And thereafter, add the following illustrated code to a blank text file.

(function($) {
$(‘#toggle’).toggle(
function() {
$(‘#popout’).animate({ left: 0 }, ‘slow’, function() {
$(‘#toggle’).html(‘<img src=”http://www.example.com/wp-content/themes/your-theme/images/menu.png” alt=”close” />’);
});
},
function() {
$(‘#popout’).animate({ left: -250 }, ‘slow’, function() {
$(‘#toggle’).html(‘<img src=”http://www.example.com/wp-content/themes/your-theme/images/menu.png” alt=”close” />’);
});
}
);
})(jQuery);

As a matter of fact, don’t forget to change the example.com. Hence, despite of this use your own domain name and your theme with your actual theme directory. Further, save this file as a slidepanel.js to your desktop.

Thereafter, you will now need an image that will be used as the menu icon. Because a hamburger icon is used most often as a menu icon.

However, you will also find such images on the different website. Whereas, we will use the menu icon from Google Content Icons library. And once you search an image, that you want to use, save it as a menu.png.

Further, you need to open an FTP client and upload the Slidepanel.js file in the /wp-content/your-theme/js/ folder.

However, if your theme directory does not have a JS folder. Then, you have to create it and after that upload your file. Consequently, you must upload the menu.png file to /wp-content/themes/your-theme/images/ folder.

Hence, after uploading the file we need to make sure that your theme loads the javascript file. Which conversely, had been added and we get this by enqueuing the Javascript file. Thereafter, add the illustrated code to the functions.php file of your theme:

wp_enqueue_script( ‘wpb_slidepanel’, get_template_directory_uri() . ‘/js/slidepanel.js’, array(‘jquery’), ‘20160909’, true );

Although, we need to add the actual code to your theme’s header.php file to show the navigation menu. Despite of this, you should look for such code as illustrated below:

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

However, you want to wrap the existing navigation menu with HTML code. Just to illustrate your slide panel menu on smaller screens.

<div id=”toggle”>
<img src=”http://www.example.com/wp-content/themes/your-theme/images/menu.png” alt=”Show” /></div>
<div id=”popout”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</div>

Note that the Navigation menu of your theme is still there. Regardless, We have wrapped it around the HTML that we need to trigger the slide panel menu.

However, the final step is to add the CSS to hide the menu image icon on the larger screens. Also, you will need to adjust the position of the menu icon.

On the other hand, here we will show you a sample CSS that you can use as a starting point:

@media screen and (min-width: 769px) {
#toggle {
display:none;
}}@media screen and (max-width: 768px) {
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;}.nav-menu li {
border-bottom:1px solid #eee;
padding:20px;
width:100%;
}.nav-menu li:hover {
background:#CCC;
}.nav-menu li a {
color:#FFF;
text-decoration:none;
width:100%;
}
}

Nevertheless, depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

How it looked on our demo site:

Mobile-Ready Responsive WordPress Menu

Concluding Remarks

Here, particularly we have discussed 4 Easy Methods to Create a Mobile-Ready Responsive WordPress Menu.

Not to mention, we concluded its layout, its definition, and the methods for the same in detail. They do add value to any blog post. And, this leads to the end of the blog.

Further, read the above-illustrated methods carefully and create your Mobile-Ready Responsive WordPress Menu.

Moreover, we hope this post helped you to create the same. However, If you have any problem or question related to this, tell us in the comment section provided below.

Additionally, If you liked this post, please share it with your peers.

You can contact our WordPress support team Dial  +1 888 614 0555 (Toll-Free). Our WordPress customer service will always help you. We will happy to help you and solve your problem related to WordPress.

Read more blogs:



Leave a Reply