How to Add a Mega Menu on Your WordPress Site
Articles Blog

How to Add a Mega Menu on Your WordPress Site

August 9, 2019

Are you looking for an easy way to add a
mega menu to your WordPress website? Well keep watching in this video I’ll
walk you through step by step how to add a mega menu to your site in WordPress.
Websites that have a lot of content that they want to share usually use a mega
menu. This is Starbucks and you see they have a mega menu which is an easy way to
pull in all this useful information. It makes it easy for the user to find. To
get something like this on your website let’s head over to our WordPress
dashboard. From your dashboard let’s go to our plugins area, add new, because
we’ll be installing a new plugin called Max Mega Menu. This is the one we want so
let’s click install now. Once it’s installed you want to make
sure that you go ahead and activate it as well. Once it’s activated you’ll see
it here you also see a new menu item over here so we’ll click on that. When we
click on that it’ll take us to our general settings where we can set it up.
The general settings will work for most people
so you can click Save Changes here. The one thing that we’ll want to do though
is go to menu themes and we’ll want to click on the menu bar and we will want
to change the color scheme here to match our theme’s color scheme. In order to find
out the background color that your theme is using simply head over to your
website and on the menu area right click somewhere around there, go down to
inspect to inspect the color scheme. Over here you see different areas we’re
looking probably for main navigation for my theme and we’re looking for a
background color. My background color is transparent. Yours may be another hex
color scheme. So you just want to grab that information, copy it, go back to our
menu themes area, menu bar, and for the menu background simply add that
information. You see I can put that here that’s for my transparent and you can
put in the color that yours is. Once we’ve done that let’s scroll all the way
down and make sure we save our changes. You see that the changes have been saved
here so now what we can do is we’ll go to our appearance, menu area and if
this isn’t expanded you’ll want to go ahead and expand that area because we
want to click enable for our mega menu and then we want to come over here and
hover over this until we see the mega menu button. Let’s click on that and it
opens up this area. From this you can choose how you want the mega menu to
display and these are the choices. Over here you can also choose a widget to add.
Just to show you what it looks like I’ll add a gallery from here we can also
choose pages and if you need to edit the widget area just click on the little
toolbar here so that you can choose for instance how to do the gallery here. We
can just pick the images that we want, we’ll create the gallery, click insert, and
now this has a gallery here. We’ll save that and now we can close that. Now we
can do the same with pages, choose what pages we want to add you can pick how
you want to sort them we’ll go by page title for this and click Save.
I can close that out as well and for this menu I’m done so we can close this
out, save menu, and now we can go to our site to see it in action and on your
site you can see that we have the gallery and the posts down here.
Obviously you’ll want to work on it to make it look exactly like you want but
this is how you add a mega menu to your WordPress website. Did you learn
something from today’s video? If so subscribe to our YouTube channel and
we’ll send more helpful tips to help you manage your WordPress website and thanks
for watching

Only registered users can comment.

  1. Hi, sorry but I’m a bit lost with the end result. I was expecting to see a menu which looked a little like the Starbucks menu.

    Do those 3 pictures form the menu which displays when you click on on Home?

    And to get it working like the Starbucks menu do I rather select “flyout menu” and add a couple of navigation menu widgets rather?

  2. Hi ! i'm using Max Mega Menu but items on level 3 don't display correctly but when I fly over the elements with my mouse it display correctly. So i would like to display that correctly before i fly over how can i do ?

  3. the plugin does not completely replace the original menu, only a part. How to hide the old menu that comes with the theme .. I just want a single menu to appear.

  4. Highly recomend to use Groovy mega menu. It literally took me like 15 minutes to figure out how it works and I was able to achieve a super nice menu on my site

  5. I created the Max mega menu widget, but then when I went to place that widget in my menu in the Mega menu standard layout mode, the widget was not available in from the big list of widgets at right.

  6. I did not learn anything. thought this was supposed to be a beginner video. Now more colnfused than ever.

Leave a Reply

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