How to Create a Mobile Ready Responsive WordPress Menu

In this articleI want to walk you through how you can create a mobile-ready responsive wordpress menu. To get that on your site, let’s go to our WordPress dashboard, we’ll be installing a plug-in. So we’ll head over to plugins add new

We’re looking for the Responsive menu plug-in. We’ll install that,

and we need to activate it.

Once it’s activated you’ll see a new menu item over here

and you can go in and set it up. The break point that means how small does the screen size need to get before it starts using this one. 800 is pretty good it’s usually for tablet or smaller

and the menu to use it for we have all pages that’s our default menu for the site and then you can add some CSS if you want.

So I’m happy with that so we’ll click update.

Let’s go to the front of our site to show you what it looks like. Alright since our site is on a full screen, we are seeing the full menu up here

but let’s see what it will look like when we shrink it. So when you shrink it you now see the responsive menu here

and i can go through and pick the page that I want from there.

Now the other one I want to show you is different style of menu, it’s called the responsive drop-down menu and it will be a little bit different. So I’m going to remove this one

and I want to add a new plugin called Responsive select menu.

This is the one we want so we’ll install that one

and activate it

and now when we go to our site now instead of the little icon we have this drop down.