How to add wordpress responsive menu in 10 minutes

Lot of times you didn’t liked the menu being provided by the theme that you have installed for your wordpress website. And Have struggled for a solution that you can use to create your own wordpress responsive menu which could replace the existing wordpress menu and a menu which is also compatible with the mobile phone and smartphones. 

You also didn’t wanted to write your own menu system totally from scratch. So here is a solution as a plugin. The name is Responsive menu here is the screen shot to identify the plugin 

once you have installed the plugin, you will see a menu item called Responsive menu on the left side vertical menu in wordpress dashboard. When you will click the responsive menu link on the left hand side, you will see the following screen.In the Initial setup tab, set the break point to 4000 px. Breakpoint is the value in pixels which determine if the menu will show in that much resolution.

Let me explain with an example if the website is being opened at 1200px width ie. the resolution of the computer or screen in which the website is being opened is 1200px and the breakpoint has been set as 1100px that will mean that the menu will not show in this case.

If you want that the menu should show in all the resolution on all the devices, set the breakpoint to such a high value that nobody should have resolution greater than it.

So that the menu shows in all the cases. Which makes it always showing wordpress responsive menu.

After Saving this setting select the menu to display under the drop down option Menu to use, in my case you can see there is a menu by name menu1 that shows here. You can create this type of menu in Appearance -> menu which is standard part of wordpress. Custom wordpress menu allows you to place the posts, pages, categories, links all into the wordpress menu.  For example following is the menu1  created by me as custom wordpress menu .

Now click on the menu tab and the first option that you will see is the menu section ordering Corresponding to each Menu item here there will be a section below this section where you will put in the values to configure that specific menu item.

You can also disable items in this like if you don’t want the additional content to be displayed click on the green on box and it can be turned off.

You can also arrange the sequence of the sections that will displayed inside the menu by just dragging and dropping each menu item in a particular sequence, like in my case you can see that the items are arranged in the following order 1) Additional content 2) Title 3) Search 4) Menu. Now Each Menu Item here further has a section for it on the same page.

Like Additional Content section will allow you to put in HTML content inside the menu.

Title Section will allow you to Put a title for the menu, change the color, background color, upload an image to put inside the menu, change the size of text for title.

Remember what ever we change in the title section will be applicable to the title section position on the menu.

The search menu item in this section will allow you to put the wordpress default search functionality in your responsive drop down menu.

And now comes the main menu where you have displayed items and once you are done with all the settings click the update options link at the bottom.

There is also lot of option available to change the colors of mostly all the aspects of the menu, the background color, the link colors etc.

The color of the toggle menu options.

Now open a new tab and here open the page of your website and here is how the menu looks to all the people that now will open your website.

Now click on the menu button and it will appear as a X and the menu will appear from the left hand side have look

Now the Above screen shot belongs to the mobile view. Hope you liked this article do post your comments and questions below.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

(Visited 110 times, 1 visits today)

More from my site

wavatar

Posted by deepak.kapoor

An Active Youtuber, Blogger, Traveller, Programmer, Wordpress developer. Likes to spend his free time Motorcycling through the hills.

Leave a Reply

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