Mega Menus – How to Create Mega Menus in WordPress

Introduction

If you want to learn how to create mega menus like these on your WordPress website stick around because I’m about to show you how to do so already. today I am going to teach you how to create a mega menu on your WordPress website. now an example of a mega menu would be what you would find over here Jackthreads calm. and it is an excellent place to buy clothes I should add and as you can see when you hover over the menu items. you have the mega menu showing up you have text to the left you have images. and this is a pretty good-looking navigational system is very effective. and it’s very slick in design as well so I am going to attempt to create something similar.

over here on my website for the movies and characters menu items. now I am going to be doing so using a plugin called the mega menu by Luo vacas calm. and I have to say that these guys are the best simply the best for making this plugin and for offering it free of charge. because trust me when it comes to finding plugins that can create mega menus for you in WordPress a very vast majority of them tend to be premium plugins. so I am going to show you how to configure the plug-in on your WordPress website. I have already installed and activated the plug-in. so I’ll come down here to the back end and when you do so you will find this tab over here that says W our mega menu go ahead. and click add new we have to create a new profile for our main menu. so I’ll just add a title name that main menu. and now in here you can choose the menu which you’d like to create a mega menu for I am creating one for the primary menu. and now in here we have access to the individual menu items underneath my primary menu. so I am going to click on movies. and now in here I’m going to turn on mega menu and now in here we have a box where we can begin to create our mega menu in here I have one column I can add an additional column by clicking on the very first button in here.

so now I have two columns keep in mind that I can change the size of the individual columns by simply stretching to the left or stretching to the right you can change the sizes that way. so in here I’m going to add my very first element when it comes to adding elements there are three types you can add you can add an image sub menu or even text I’m going to add an image. and let’s go ahead and add a very first image okay. so let’s see what can we add over here let’s just go with the Joker for now that man’s best friend alright. so here’s the preview and we can change the size as well I’ll just stick with medium for now. and I will add a title so let’s go with a joker pic now the title would not show up in the front end okay the title is just to allow you to easily identify out what this what content this column actually contains. so we click on save and in here I’m just going to go ahead and add my text and by default we do have some sample text that comes with a plug-in.

I’ll just go ahead and remove the last three lines and let me just add a title let’s make that Joker.

description and I’ll just add the Joker in here so that it shows up on the front-end.

The Joker let’s make this an h2 let’s save this let’s go ahead and publish what we have and let’s take a look let’s see what we have right now movies and take a look at that we now have the Joker showing up with his face his title. and a very short description awesome. let’s go ahead and add another role now when I hover over the add row button in here you have the different layouts for combs that you can go with.

I’ll just go with the two columns 50 by 50 and I can also clone the columns above by clicking on the duplicate button in here to clone this element. and then I can drag the clone in here and then I can simply edit the image clicking in here and who do we go with this time.

let’s go with Darth Vadar damn tan tan tan tan tan tan I’m alright let’s change the title Darth Vader selfie that’s really like selfies alright. Darth Vader selfie and I’ll do the same for the text as well duplicate the element drag that in here and I’m just editing in here the Vader and I’ll change the title to Darth Vader Darth Vader disc.

alright let me save that let’s go ahead and update our menu. let’s come back over here and refresh the page and what do you know we have the finishing up just beneath the Joker awesome awesome awesome. let’s go ahead and add one more column again to the very first row and another column to the second role as well. so I’ll just add a column now from here you can actually rearrange the positions of each column by simply dragging and drop in so now we have a new column in between the first two columns. let’s go ahead and add another image and let’s see who do we go with who should we put side by side with the Joker oh. let’s go with Jason XY not Jason X our good old buddy Jason X Jason pick let’s go ahead and save that and I’ll do the same thing here as well.

let’s add another column drag that in here add a new image all right so who do we pair with Darth Vader. let’s go with a predator why not the predator and if you haven’t seen the very first predator movie with an old rotten Tiger I will recommend that you do. so it is an excellent movie alright let’s update that we now have three columns in each row with two images and text block. let’s see okay alright so we have a three columns showing up quite alright but the menu system looks quite blocking. because it’s very very short it’s not wide enough. so what we can do is to increase the width of our mega menu and to do that I am going to click on the gear button just next to movies. and now in here you can go with a full width container as you can see. so let me go ahead and update that let’s come back in here and refresh the page movies.

and now take a look at that we now have the entire mega menu stretching to the ends of the container so you could do that if you want to but I’ll just go back in here and change the width back to fixed. but I will increase from 600 pixels to 980 pixels let’s do that let’s update come back and hit refresh the page and awesome. so this looks way better than what we had originally awesome now let me quickly show you how you can make simple changes to the appearance of your images and text. let’s go back go back to movies now if I click on the image element to edit we do have a block in here that says appearance. I can click in there and you can change the container style we have rounded as you can see this is what you will have you can go with the circle and then this what you will get and finally we have the thumbnail which is what you get over here so let’s go ahead. and do the thumbnail for the Joker let’s go ahead and change the one for the pillar tool choose that off a circle.

and let’s just save that and update and see what we have we fresh and okay take a look at that awesome now there is a problem though and that is none of these images are clickable. you can’t click on any of them so we can change that by going back once again to movies and in the image in here you have the unclick button. you can change this to either show a large image or go to a specific URL what I’m going to do is to go to my category. and a category I’m going to go with will be the action category obvious that you need to have this categories of these categories of posts. already in your WordPress website and you can go to open it in equine browser if you want to all in a new tab or even in a lightbox. let’s just go with a new tab let’s save this let’s update let’s go back let’s refresh the page come back to movies now if I click on the Joker we now have the new tab with the category of action awesome awesome awesome.

so what I’m going to do right now is I am going to pause the video I’m going to go ahead and create a mega menu for the characters menu item and I will resume the video once I have done. so right I’m back and as you can see I have gone ahead to create the mega menu for the characters menu item and as you can see we have three good guys on the very first row the second row has their names on a short description while the third row we have three images of not-so-good guys. and then the very final row has their names and their descriptions this is the back end and this is exactly how it looks like. so you can go ahead and begin to create different kinds of mega menus the only thing limiting you at this point right now is your imagination so as an example to create something like the one we have over here at Jackthreads.

you could create this using two rows each with four columns. so an example the very first column would have the text form let’s say shop all clothing down to pants and then you’ll have all these images with the captions. and then the second row will have a text book with denim down to underwear and socks.

and then the next three columns will have these images and you can create different kinds of menu items difficult of mega menus whether using this powerful plugin there is still so much that you can do which I even I haven’t even talked about as an example on your text block. if you click on the edit button in here for the appearance you can change how the text actually looks like you could use something called a drop cap. we have the very first letter or appear bigger than the rest as you can see there are so many things you can do you can i’ll make changes to the individual rolls. so you click on the button in here underneath the add column and now from here you can change the background of the roll. so I could go in here and say okay I want an image or I want a solid color and I can just choose a color film let’s go with the let’s come down here with blue as an example.

Conclusion

and let me just save this update come back in here and fresh the page let’s go in there and now you can see we have a blue background for our very first roll there is so much you can do with this plug-in. it’s just it’s it’s amazing in here as well you can click on styling and this will stylize the entire mega menu itself. you can go with a vertical menu layout as opposed to a horizontal layout. let’s see how this looks like let’s save that update come back in here will fetch the page and now you can see that we have a different sort of menu of a difference of mega menu as you can see. so whatever works for you you can go ahead and create it I hope at this point right now you know how to use this awesome plugin to create mega menus on your WordPress website.

 

Leave a Comment