- 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.
(upbeat music)
Of 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.
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?
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 the 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.
This particular author, on a theme from Theme Forest,
the theme is called Conte, I think is how you pronounce it.
C-O-N-T-E, Conte.
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.
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.
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.
And 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!
(upbeat music)