How to add a Responsive Menu on a WordPress site

Easy navigation is a one important factor to consider when creating web sites. Because it will make users much more comfortable when viewing through the web site. If they can access a relevant web page which they are interested in a one simple single click from the place where they are currently viewing, then you’ll earn much user confidence.

Using menus is a one way to make navigation a pain free process. Not only the navigation benefit, it has far more benefits that you never thought about. Just look at the following sample menu.

Sample menu1

With a simple glance of this menu, users know what’s on the web site, wherever the web page they are in. It let users to discover all that you have to offer. With a simple single click they can visit any of it without messing through all around the website going back and forth.

So with WordPress how to do such a thing? I mean how to add a attractive responsive menu. For example look at the menu bar in our web site. When you point your mouse  over to it, it get highlighted and automatically expanded. This high user interaction termed this specially with the word ‘Responsive’.

Navigation patterns in responsive web designs can be tricky to tackle – especially while keeping a consistent look and feel on the website. Your website’s navigation is how users get around on your website. So when your responsive site is viewed on smaller screens – make sure it’s still easy to navigate. So before you move in, we invite you to read this article which let you know the importance of having responsive navigation support in your website.


WordPress Plugins

There are lot of Responsive Menu plugins provided for WordPress sites. Just have a search and you’ll find thousands of them. But we want to highlight, make sure your selection works on both mobile and desktop platforms. Having functional navigation that works on both mobile and desktop platforms is really challenging.

All menus are not slide down ones. There are lot of patterns of menus. And same menu can be displayed as several patterns according to the platform they have been viewing. We tried to categorized several types of menu patterns. Look what we had found.

  • Slidebars
  • Slidedown Menu
  • Slide and Push Menus
  • Multi-level Dropdown Menu
  • Dropdown Multi-level Menu
  • Multi-Layout Menu
  • Slideout Menu
  • Multi-Level Slide in and out Menu

Okay now.. Let’s move into the plug-in we selected for our website. You can download this plug-in by following the URL given below.

This plugin creates a nice three-lined mobile menu button (or custom image if you choose) that users can click to bring a slide out menu (from the left, right, top or bottom – again your choice), which is easily navigated. This is a Highly Customisable Responsive Menu Plugin, with 63 customisable options for a nice mobile menu or tablet menu experience enabling you to change the:

  • – Menu Title
  • – Menu Title Image
  • – Button Title
  • – Button Title Image
  • – Menu To Responsify
  • – Media Query Breakpoint Width
  • – CSS Options For Hiding Specific Elements
  • – Menu Depth To Display
  • – Top Location
  • – Right Percentage Location
  • – Line & Text Colour
  • – Menu Button Background Colour
  • – Absolute and Fixed Positioning
  • – Menu Font
  • – Menu Title Colour
  • – Menu Title Hover Colour
  • – Menu Title Background Colour
  • – Menu Text Colour
  • – Menu Text Hover Colour
  • – Menu Background Colour
  • – Menu Link Background Hover Colour
  • – Menu Text Size
  • – Menu Button Text Size
  • – Menu Links Text Size
  • – Choose Overlay or Push Animations
  • – Slide Animation Speed
  • – Ability to auto expand/hide sub-menus
  • – Inclusion/Exclusion of Search Box
  • – Choice of Positioning of Search Box
  • – Transition speed
  • – Slide Animation Speed
  • – Menu Link Heights
  • – Text Alignment
  • – Choice of side to slide in from (left, right, top, bottom)
  • – Choice to use inline/external stylesheets and scripts
  • – Option to include JavaScript in footer
  • – Option to remove CSS !important tags
  • – Choice to Minify created CSS and JS files (saves up to 50% file space)
  • – Choice to auto-close menu items on click (for single page sites)
  • – Choice to replace 3 lines with an x on click
  • – Minimum width of menu
  • – Maximum width of menu
  • – Choice to Auto Expand Parent Links
  • – Choice to Ignore Clicks on Ancestor Links
  • – Choice to Close Menu Automatically on Page Clicks
  • – Choice to Specify Title Menu Link
  • – Choice to Specify Title Menu Link Location
  • – Ability to add custom HTML snippet inside the menu
  • – Choice of location for custom HTML snippet inside the menu
  • – Choice of using shortode or not
  • – Ability to change the 3 lines height
  • – Ability to change the 3 lines width
  • – Ability to Export Options
  • – Ability to Import Options
  • – Ability to set sub menu arrow shape/image Options
  • – Plus more…


Download the plug-in from the URL we given.

  1. Upload responsive-menu to the /wp-content/plugins/ directory

plugins menu

  1. Activate the plugin through the Plugins menu in WordPress
  2. Set your options from the Responsive Menu admin area
responsive menu admin
Fully customisable Admin Screen

Now you can easily add whatever the menu items you need on your web page from the ‘Appearance’ -> ‘Menu’ tabs. It will display according to how you set up your ‘Responsive Menu’.

menu admin area


Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below