in

How to Create a Mobile-Ready Responsive WordPress Menu?

How to Create a Mobile-Ready Responsive WordPress Menu?

Most of the users now prefer mobile devices rather than desktops to access the internet. With that thing in mind, every website owner thrives on making their site responsive. Having a responsive layout will help the users in visiting the site on almost every device. However, as an owner, you need to make every element of your website mobile-friendly.

The most widely used thing on a website is the navigation menu which helps your users in finding their way on your website. If the menu is not responsive, then your mobile users will not be able to navigate on your site. If you are looking to create a mobile-ready menu, then the process for this task is explained below.

Method 1 – The Plugin Method

Step 1

As the name suggests, it requires you to install a plugin on your website. All you have to do is head over to your WordPress admin dashboard and visit the Plugins> Add New page. Now look out for the Responsive Menu and install it on your website. Once the installation is complete, you need to click on the Activate Plugin link to start using it.

Step 2

After activating the plugin, you need to open the WordPress admin area and visit the Responsive Menu. Here you need to specify the width of the screen and choose the menu which you want to use.

Step 3

If you have not created a menu, then you need to head back to your admin area and navigate to the Appearance> Menu page. Now hit the Create a New Menu button where you need to enter a name for the menu and press the Create Menu button.

Step 4

Select the pages from the left side and click on the Add to Menu button to add the pages to the menu. Afterwards, you need to select the Theme location and press the Save Menu button.

Step 5

Now you need to enter the CSS class from the previous menu so that the plugin can hide this menu on small screens. You can attain this class via the inspect tool. Once you have provided the plugin with the necessary details, you need to press the Update Options buttons to save the changes. You can now visit your website to see your new responsive menu in action.

Method 2 – The Coding Method

Step 1

The process includes some coding knowledge, so it is best that you create a backup of your website. Once you have created the backup, you need to create a plain text document on your local system and name it as navigation.js. Now open that file using any text editor and paste the following code and save the changes.

( 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);

Step 2

Now you need to connect with your FTP client and open the WordPress directory. Here you have to open the wp-content folder and head over to the Themes> Your Current Theme folder. Create a new folder and name it as ‘js’ and upload the navigation.js file.

Step 3

In the next step, you need to head back to your current theme folder and download the functions.php file to your system. Upon downloading, you need to open the file using a text editor and paste the following code into it.

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

Now save the changes to the file and upload it back to your current theme folder via your FTP client.

Step 4

You have now created the menu, but you need to add it to your website. In most of the cases, the menu is added to the header of the website. To add the menu to the header, you need to log in to your WordPress admin dashboard and head over to the Themes> Customize page. Here you need to click on the Additional CSS button from the left menu which will open a new dialogue box. Now paste the following code into the box and press the Update button to save the changes.

/* 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;

}

 

}

After adding the code, you can visit your website on different devices with different screen sizes and witness your site adjusting to every screen size.

Endnote

These were the two methods for creating a mobile ready responsive menu for your WordPress website. The plugin method is undoubtedly the simpler process and is recommended for the beginner users. However, if you are familiar with the coding, then you can go with the coding method and customize your menu.

Leave a Reply

Your email address will not be published. Required fields are marked *

How to make your WordPress Website Multilingual?

How to make your WordPress Website Multilingual?

How to Add a WordPress Query Monitor on Your Site?

How to Add a WordPress Query Monitor on Your Site?