For WordPress Wednesday Kori Ashton shows you how to use a free plugin to make a different mobile menu. This is a free plugin with many options, but Kori makes it look easy. Be sure to subscribe for more videos each week on WordPress, SEO and Social Media Marketing.
The WP Mobile Menu Plugin can be found here https://wordpress.org/plugins/mobile-menu/
Check out Kori’s Favorite WordPress theme – Divi here
(affiliate link) https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=37301
Sponsored by Liquid Web – The Most Helpful Humans in Hosting!
https://www.liquidweb.com/products/managed-wordpress/
Use Code WordPress33 to get a discount today!
Full Transcript
Hey y’all, I’m Kori Ashton, and today’s tutorial is all about how to get your mobile navigation set up for a mobile user. So maybe you don’t want the exact same options on your desktop version as you want on your mobile version. Maybe you wanna optimize it, offer fewer clicks, or offer your drop-downs to already be open. How do you make something be really creative and different for all of your mobile users? I’m gonna show you the plugin I recommend right now.
Liquid Web
course, this video is brought to you by Liquid Web, the most helpful humans in hosting. If you are looking for support for your WordPress website, I cannot recommend them enough. They’re absolutely my go-to team for all of our clients. I love moving my clients into their environment for extra security, faster load time by far, and above all, great support.
Anytime I call them up and I’ve got an issue, or I need help with something, they understand WordPress, and they know how to help me. So please, please check them out. I’ll put a link to them in the description box below.
Divi – Default Mobile Menu
All right, so on a mobile device, how do you get a different navigation? You’re gonna see here my little hamburger icon opens up. We’ve got all these dropdown options already visible, accessible. Now this is done by default inside of Divi. That’s the theme that I use, that I brag on, that I recommend. I’ll put a link to it in the description box below as well. Divi, D-I-V-I. So this is kinda their default mobile experience, which I think is pretty spectacular, but if you’ve already built at your WordPress website, you’re already trying to use a different theme, what is a better solution for you?
WP Mobile Menu Plugin
How can you add in another plugin to get you a better user experience? So that if your desktop version shows all of these options, you know, you still wanna have a really solid looking, responsive version, how do you do that, if you wanna have a custom mobile nav? I’ve got a plugin right here that’s gonna solve our problems. This is called WP Mobile Menu. It is a mobile-friendly, responsive menu, and it does have a free version and a paid version.
The free version has a lot of great bells and whistles though, I’m gonna show you right now how to plug it in and get started today. Some authors can be very generous, and give you options like this when you go into appearance and go to menus. Some authors think ahead and they want you to have the flexibility and the ease of use to make these changes, so you could if you wanted to, come check here and see what different types of menu selections your author has allowed you to have.
Konte Theme
This particular author, on a theme from Theme Forest, the theme is called Konte, I think is how you pronounce it. K-O-N-T-E, Konte. And we purchased it over on ThemeForest.net, I’ll put the link to it in the description box below as well. They gave us default options to be able to do that, so I could if I wanted to just go create a totally different menu up here, and then assign it to be the mobile menu, and click Save. Install
Install WP Mobile Menu Plugin
But if your theme author, again, wasn’t that generous, didn’t think about doing that for you, or you don’t have a good solution for your mobile nav, this is how you’re gonna do it.
You’re gonna go into plugins, and click Add New, and remember that we’re gonna go look for that plugin that I just showed you right now, called WP Mobile Menu, right? We’re gonna search for that one, you’re gonna wanna look for this icon right here. This is it. As of today, there’s 60,000 active installs, phenomenal reviews on it, it’s been updated, and it is compatible with my most recent version of WordPress.
Please be sure that that is still current for you today when you’re viewing this video. You wanna be absolutely certain that this is still a valid, and good, and safe plugin to use. If it is, go ahead and click Install Now, and then you’re gonna wanna go ahead and click Activate, so that it is active on your site, and then I’ll show you how to walk through it, and, because there are quite a few options, don’t get overwhelmed with the option overload, but this plugin team is very generous with all their offerings, and you can really come up with a phenomenal solution.
This is asking if you’re okay with sending them data. It’s completely up to you. I’m gonna go ahead for the sake of now, and just click Skip.
Plugin Options
So please don’t be overwhelmed by all the options. I know how daunting it can be when you open up a plugin, and you see all of these features here. You know, you’ve got this left side navigation that lives over here now so we can get into the mobile menu options, and it’s always nice to find an author who is extremely generous giving us access to a lot of different function and features, and simple changes. But it can seem really overwhelming, so just step by step, read through each one of these.
Most of them you can leave as default mode, but there are a few right now that we wanna look at to make some edits, and tweaks, and changes to. So the first one I would suggest is enable only in mobile devices. I would go ahead and turn this on, so that this version is only visible on a mobile device. If you want the hamburger icon to be visible on the left side, or the right side, you would toggle these.
So if we wanted it on the right instead of the left, we can turn this on, toggle those, and say enable the right menu, to happen. And then there are other things that they’re allowing you to hide inside that menu navigation. It’s completely up to you as to whether or not you’d want them hidden. We’ll have to test it, right? You’ll have to kinda tinker back and forth with some of these options, and really just try, and see what you like, click Save Changes, go to the front side of your website, click Refresh, and now our navigation should be on the right side. It is now, it’s on this right side here. When we open it up, looks beautiful. Looks like all of our options are in here, and of course we can manipulate these colors and change these to be whatever we would like them to be, right?
You do that by going back in here to this side, clicking on Colors, and make sure that instead of the left menu area, you’re gonna scroll down to the right menu area, and you’ll manipulate all of these color choices here, easily and quickly so you can add in all of your custom colors, whatever you’d like to do, to make this navigation match your branding, and all of your other colors, and they’ve got third-level menu colors as well that you can manipulate, and change all through here, including fonts.
You can come in here and make changes to your font family, which I think again, very generous. And they have amazing documentation. So again, don’t feel overwhelmed. They have step by step instructions on how to get started, all of the different panel settings. A
nd then they also wanna tell you about the options in the Pro plan that you can get over 2000 menu icons, you can actually add icons to your menu areas, header banners, you can add in different menus for logged in users, all sorts of cool features and functions if you wanted to upgrade to the Pro, or the Premium version. But other than that, really simple and straightforward.
Now I have different options. If I wanted to, I could go to my appearance, go to menus, make a totally different menu, right? We can say, Create New Menu up here, and we can set this menu to be mobile navigation, and you can make this as simple and minimal as possible. You can pull out all of your dropdowns, and don’t have dropdowns, just have the categories that you want listed out here. It’s completely up to you
If you wanted just a checkout navigation, you could do that as well. Click Add Menu, and that could be the navigation that you’re using inside of your mobile menu. So I clicked Save Menu, I’m gonna go back over here, to our mobile menu options, right, our mobile menu options, we’re gonna go into our right menu, because that’s the one we want it to appear on, and inside of here, we’ve now got that mobile navigation that we just created. You’ll select that menu, scroll down to the bottom, click Save, and now that new shop menu that we just created is what should be visible here on the front side.
I’m gonna come here, I’m gonna click Refresh, so that we have the most recent version to look at. We’ll open this up, and there’s My Account, Checkout, Cart, and Shop. Kinda cool, huh, you guys? It’s pretty straightforward. I’m gonna put the link to this plugin in the description box below. If you have questions about this, be sure to reach out to the developers of the plugin first, because they have awesome support, and they’ll be able to answer your questions a lot more quickly than I will.
But if you have WordPress questions, you’re more than welcome to tweet to me, subscribe to my channel, come hang out with me, every single Wednesday, or check out Liquid Web support, reach out to them, they’re 24/7, literally year-round, they’re ready to answer all of your WordPress questions. I hope this helps y’all, and I hope you’re having a great WordPress Wednesday. I will see y’all next week, bye everyone!
