Demo: Online payment of electricity bills in Nagaland

WordPress Plugin for responsive menu

With the increasing use of mobile phones, there is a lot of importance now on responsive web design. In the recent years, there is a lot of emphasis on responsive web design, so that the experience on mobile devices is smooth and user friendly. Keeping that in mind, it is better to have a responsive menu for mobile users instead of the default menu layout even for our WordPress sites. Luckily, there are responsive menu plugins out there for WordPress! There may be a lot out there, but in this post, we'll see one particular WordPress plugin that will enable responsive menu for mobile devices for a WordPress website.

While some WordPress themes takes care of responsive menu in their template design itself, most themes may not. For this example, I am using one of the default WordPress themes - Twenty Eleven. We will see how the WordPress menu looks like on mobile and how the menu is neatly displayed responsively after installing the plugin.

The WordPress Responsive Menu Plugin:

WP Responsive Menu By MagniGenie | Plugin Page

To start with, we will search for the Responsive Menu plugin and install it from WordPress Plugins page.

• Login to WordPress
• From Dashboard > Plugins > Install New, search for "WP Responsive Menu"
• Click Install
• Click Activate
• A menu is added to the WordPress sidebar by the name "WPR Menu"
• Click on it to enter the WPR Menu Settings
• WP Responsive Menu Settings Page: General Settings
• Check the option "Check if you want to activate mobile navigation"
• "Select the menu you want to display for mobile devices" - Select the menu from the dropdown. This will usually be the main menu you created in "Appearance Menu".
• "Elements to hide in mobile" - enter the element ID or element CLASS of the main navigation menu. If this is not entered, the main menu is also displayed as it is. Since the plugin will enable a mobile responsive menu, it is better to disable the default main menu.

How to find the main menu element ID or CLASS?

Depending on the template in use, the element ID or Class of the main menu might vary. The easiest way is to use the browser's "Inspect Element" tool. Most modern browsers has the "Inspect Element" tool. For example, using Firefox (or any other browser)-

• Open the WordPress website home page. 
• Select some text in the main menu and right-click. Select "Inspect Element" tool.
• A new window appears in the same page or in a pop-up window, that displays the underlying code of the page. Make sure "Inspector" tab is selected in this window.
• Since we selected some text from the main menu and opened the "Inspect Element" tool. the tool must have highlighted the code corresponding to the selected text's element. 
• Inspect a few lines above the highlighted code and you should see code related to main menu. It could be something like "main-menu" etc. with ID and Class. You can use any one.
• In the example code below from FireFox on WordPress's "Twenty eleven" template, the main menu class is "menu" and id is "menu-main-menu".

•  So, from the ID and Class in the code above, I can either use #menu-main-menu (for ID) or .menu (for CLASS).
• So the general settings for WP Responsive Menu looks like:

 

•  WP Responsive Menu Settings Page: Menu Appearance Settings
• In the menu appearance settings we can configure the position and colors of the menu.
• Configure as desired.

Before the plugin is installed or enabled:
As we can see, the default menu items are  struggling for space to fit in the mobile's screen size.

WordPress Menu without Responsive Menu Plugin

After the changes are saved, the WordPress menu on mobile looks like:

WordPress Responsive Menu - Collapsed

WordPress Responsive Menu -expanded

As you can see, it looks much better now.