in this video you'll learn how to create a mega menu using Astra and Elementor Pro so without further ado let's get into the topic hello and welcome to the binary IQ if you're visiting this channel for the first time to consider subscribing and hitting that notification build so that you don't miss our upcoming videos also if by the end of this video you'll learn something out of this do not forget to hit that like button let's get on with the video and this video I'll show you how to create a mega menu so if I hover my mouse over the shop link you'll see this mega menu pop-up with images and a button similarly if I go to my men link by women link my accessories and my contact page in the contact page you can see I have a small contact form as well a map and some text so you can create this and much much more using Astra as well as Elementor first things first in order to create this beautiful versatile mega menus you have to have the Astra premium theme as well as Elementor premium page builder plug-in I'll take you to their websites and these are all the features that come in with the pro version so we are interested in this nav menu option which will open the option of a mega menu and you can see with Astra you get so so many options like white labeling creating different blog layouts different site layouts and extreme connection with WooCommerce different custom layouts which will be using greater typography options and much much more so if you're actually serious about creating websites and using WordPress for that process Astra theme and it's pro version is a must like you cannot do away with it similarly there is a plug-in a page builder plug-in called element this is by far hands down the best page builder plug-in out there in the WordPress industry again if you're serious about creating websites like this is a must you cannot do away with it yes there are different plugins out there which mimic the process of Elementor but nothing is as good and as versatile and as powerful as a limiter itself so if you haven't purchased them already – so the links to everything which I'm talking about will be in the description I'm here inside the features page and if I keep scrolling down you'll be able to see how many features Elementor has now there are some pro features as written over it the rest are free and in fact I'm strangely surprised as to the number of features they are giving away for free so there are many features out there and the list keeps going on and on and on and on and on and on and on so if you are actually serious go ahead and purchase it and we'll start off with the video so right now I am inside my dashboard in order to open the option of a mega menu first of all you have to go inside appearance go inside Astra options click on it inside a store options make sure that your nav menu is activated so in general it will be deactivated all you have to do is click on this activate and just like that you are ready for the next step so step number two you have to create a menu item now I already have a menu so I will take you to my front end of the website so this is my menu right now I have different mega menus associated with it what I'll show you is creating one additional tab here where I will create one additional menu to show you so let's do that in order to create a menu link you have to go inside menus in order to go inside menus go back to your dashboard go to appearance go to menus inside menus you can see the different options that I had on my front end so for example I had home I had shop I had men I had women I had accessories I had contact so similarly if I go I had home shop men women accessories and contact so we'll be creating one additional link out here so in order to create a link we'll go to this option where it says custom links I'll just click on it in the URL I'll simply type hash this creates a dummy link in the link text let me write mega menu so this is what it is all about I'll click to create add to menu once this is done I'll go back to my custom links again I'll again create one more link so I'll put the hash symbol again in the link text I'll just write submenu I'll click Add to menu so I have my two options created now what I have to do is put submenu under mega menu so to do that just hover your cursor over this menu hold on to it and just move it ever so slightly to the right and you can see the indent change I'll just let it go and now it's under mega menu so I'll save my menu go back to my website the front end of the website refresh it and now we have this additional option of a submenu so inside mega menu we had a submenu now let's change it to a mega menu an actual mega menu so we'll go back to menus let's head over to mega menu again and just click on this toggle down button let's go to where it says Astra menu settings let's click on it and the first option you will see is mega menu so I have to enable mega menu so I'll just click on this to enable mega menu inside mega menu with some of the other options which pop up there are three options so first is the width of the mega menu which can be either the width of the content the width of the menu container itself or the entire full width of the page so we'll let it be contained for now I'll just click on save you're not going to change any of these settings because we are going to create something completely different and out of Elementor so we are not going to touch the settings of estrada all the setting which we needed is just this that we have to enable mega menu so I'll just click out of it so we have created a mega menu but now inside this mega menu what we have to do is go inside the sub menu item click on as from menu settings again we'll be going to the options first so the first option will let it be make this column as a column heading we do not want to do that in the menu label will click on this hide menu labelled so we do not want this label to do anything it's just a container which will draw its source from an elemental template so as you can see there is an option of content source so the content source is where the magic happens right now it's set to default so I can create things out here there are different options so there are options for creating a custom text so you can type your text here and we'll show we have template options and wizard options so right now we'll be using templates and in this template we'll be searching for whatever template we will create so let's go ahead and create a template we'll come back to this page later so I'll just cancel out of it all rather save this option first once it's saved let's get out of it now we will be creating a template using Elementor in order to do that just go where it says Elementor go one step down to where it says templates inside templates go to add new and add new we'll be choosing our template type so we'll be creating a section in this case not a page not a pop-up we'll be creating a section in the name let's call it mega menu Elementor we will create template you will find this library section pop-up where there are many pre-built templates in fact we can actually choose one of these and be done with it so let me show you first how easy it is and then we'll go ahead changing it so for example if I like something out of this so let's say we like this team section slide we'll just click on this to view it let's just click insert for now I just want to show you how easy it is to create a mega menu and then we'll move on to editing and tweaking stuff so we have our block created now there is a lot of spacing in the top will not touch that for now I'll just click on publish now let's go back to our dashboard so I'll just click on my dashboard I will go back inside menus so go to appearance go to menus inside menus let's go back to our mega menu which we just created and this submenu inside it inside the submenu will again go to a shop menu settings and we'll scroll down to where we just left our templates as blank so now we'll just type our template name if I remember correctly my name was mega menu Elementor and there it is I'll just click on it I'll save it and just like that we are done yes we are done with creating our mega menu so let's go to the front end of our website reload it will again go to where it says mega menu and if I hover my mouse over it you'll see the element you just created the block you just created and it is as easy as it gets so now all you have to do is go back to where you were creating your block with Elementor change it to whatever and it will show up in this mega menu so let's in fact do some of these changes so we'll just cancel this we'll just delete this section entirely so let us try and replicate this contact mega menu where we have a contact form we have a map as well as we have some of the icons with some text so to do that we'll just click on where it says add new section will select this three column layout in the first column we need an eigen list so we had an icon we had some text in front of it then we had an icon and text in front of it so if I just hover over my contact you can see there is an icon there is some text there is an icon there is some text for that we have an option in elemental Pro so if I just click on this icon to add one of the visits I'll just search for I can list and we have this icon list option so I'll just click and drag and place it over in this column I'll just click on this list item number one we'll be placing our phone number here so I'll just type some random phone number I'll change the icon so I'll just click on the icon where it says filter by name I'll search for phone so let's just select this phone I can click insert so there it is in the second one I'll just type in the email ID so I'll type in support add the rate something like raising eyebrows dot-com I'll just click on this icon library again go back to filter by name in this I'll type envelope and let's select this of an end mill a pipe or let's select this one I'll just click on insert' lastly let's put an address too in the last one we'll put some address so let's put 22 Baker's Street will change the icon to the location I can so I'll just search for maps and I have this map icon so I'll just select this click on insert so I have my three options created I just need to change a few visual aspects of it so I'll just click on this one again go to this second option where it says style in this spacing I'll just increase the space between the icons I'll create a divider as well I'll change the color to something obnoxious like a purple in the icon I'll change the color to again a purple in the text I'll leave the text color to be black let's increase the size of the icons let's go to text now change the typography so we'll increase the size of the text as well so I'll just click on this edit typography or link in the size let's again select 25 now this looks too big so let's go over 20 in the second option now we have to place our map so I'll just go back to my widget option type in map click hold and drag oogle maps onto this one so I'll select this 22 Baker Street London in the third option let's click on this and we'll place a form here I'll just type in 4 select this form drag it over to this side and we have a form we'll quickly edit it so right now it's showing the label as well as a placeholder so we do not want the label label is anything which shows over thee or outside the text box and placeholder is anything which shows inside it so right now the label is checked on so inside labels I'll just click it to not show or rather hide so this is already looking fine now let's tweak it a little bit further first of all let's reduce the size of the message box so we'll put it to three rows instead of four and that looks okay submit button will change the text we are not going to change these actions after submit and this is not relevant here so I'll just go back to style in the column gap it looks fine it looks fine the label we don't have to worry about that text color we don't have to worry about it in the field so let's change the border radius so we'll put in a huge number so that it becomes round in the button again we'll do the same thing go to border radius and increase the border a dear to me that looks fine I'll just click on this height panel to see it and fool you now right now the issue is that everything is aligned to the top so I just want everything to be aligned in the middle so that it looks better so what we can do is just click on where it says edit column in the vertical align just click on middle so this goes in the middle we'll go do the same thing to this contact click on middle and we will do the same thing here so it already is looking good let's change the gap a little bit between these so I'll just click on this edit column again go to advanced so I'll increase the padding all around so I'll just click and put in a value like 20 I think that it's less so let's put 30 that is good we'll do the same thing or we could have rather just right-click copy right-click again paste I'll and we'll do the same thing for this one as well so now everything is properly spaced and it looks very nice so let's just change the color of this button so we'll just click on this go to style again go to button and inside the background color let's put in our purple in the color of the text let's put white and it looks good in the hover right now it's set to the theme default so we'll just click the background color to change to black so if I hover over it the would change to black so now it looks fine I'll just click on update this was in a way of futile exercise because you must have understood what needs to be done all you can create inside this section or in this page will be available in the front-end so if I go back to my front end now and just reload it go back to the mega menu you'll see the option appear and it is as simple as that so just to quickly summarize all we had to do was go to our menu options we created two custom links so you can create a custom link from down here so we just created two custom links and we placed one custom link inside the other or under the other in the top custom link we just clicked on it when to as from menu settings enable this enable mega menu option that's what we did and once we did that we went to our sub menu option told it open went to as from many options again in this case we just hit the menu label and the main thing which we changed was inside this content source we changed it to template and we selected whatever template we wanted to create or we would have created so we just click on save and went out of it went to templates created a new template and created a section template and rest is history so there you have it a simple fast but an extraordinarily powerful way of creating mega menus using Astra theme and the Elementor pro plugin so if you are not using these two themes and page builders I don't know what you're doing so go ahead and go to the link down in the description purchase them and you'll be on your way to creating beautiful websites if you like this video do hit that like button and if you think I missed something do leave a comment also if you want to see some other videos do give me feedback and I'll try and make content suitable for you again if you're not subscribed already do not forget to hit that subscribe button and while you're at it hit that notification bell as well thank you for watching and I'll see you on the next one .
Your imagination is your limitation when creating a mega menu.
Following Premium Theme and Plugin is required for this video:
Astra Theme Premium:
Elementor Pro (Page Builder) plugin:
My #1 Recommendations to best digital services:
★ Web Hosting Service :
BlueHost Hosting –
InMotion Hosting –
★ Domain name provider :
★ WordPress Theme :
★ WordPress Page Builder Plugin :
★ Email Marketing Software :
★ YouTube Tool :
★ Video, Photos & Graphics Editing :
Adobe Creative Cloud –
If you find this video helpful please ► LIKE, SHARE & SUBSCRIBE
★☆★ SUBSCRIBE TO ME ON YOUTUBE: ★☆★
DISCLAIMER: On our channel, we believe in transparency. This video and description may contain Affiliate links, which means that if you sign up to one of the products using our links, we’ll earn a small commission at no extra cost to you (In fact, by using most of our links you will end up Saving Money due to Special Discounts offered to our Audience). This helps support the channel and allows us to continue making valuable videos like this. We only recommend the BEST Services & Products that we have tried and tested over a long period of time. Thank you for your support!