How To Add Mobile-Ready Responsive Menu In WordPress Site

How To Add Mobile-Ready Responsive Menu In WordPress Site

After the smartphone revolution, the number of mobile users has increased rapidly. Latest research and study shows that the percentage of a visit from mobile has grown significantly. Users are spending more time on mobile rather than using the desktop for surfing. All these changes have led the marketers and business owner to put more emphasis on mobile responsive website design.

Navigation help people navigate through the important pages of your website and is an important part of a user-friendly website. Making it the mobile-ready responsive menu will make your mobile visitors happy and make them visit your site more often in the future.

Mobile-Ready Responsive WordPress Menu

Through this 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.

Let’s see the benefit of having a mobile ready responsive WordPress menu.

Benefits of  Mobile-Ready Responsive WordPress Menu

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 easy ways to create a Mobile-Ready Responsive WordPress Menu.

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

Let’s see how you can use to create a mobile responsive menu via themes.

Use Themes For Your Responsive Menu

However, this is one of the easiest methods to implement a stylish and responsive menu is by using the 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.

Moreover, 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.

Points To Remember While You Creating Mobile-Friendly WordPress Menu

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 Number Of Clicks Required: Further, the other option is to minimize the number 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 Menu in your WordPress

We have a list of four methods that are frequently used by our experts. Let’s start one by one-

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

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

If you found any problem in plugin installation and activation read our blog How to Install a Plugin in WordPress?

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

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.

Now, start with the second method-

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.

Now, move on to the third method-

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:

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.

Code:

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.

Code:

/* 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 Menu in your WordPress

Now look over the last method used to add the mobile responsive menu in WordPress.

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.

Code:

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

Code:

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’ ) ); ?>

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

code:

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

Code:

@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 MenuThat’s all

We hope this post helped you to mobile responsive 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