 Alright, wait hold up. What? What is going on? It's a shrinking mega menu. That is so funny. Elementor 3.12 just rolled out and Elementor has been on a roll releasing features that us web creators have been asking for. One of those is the mega menu builder. Now any time we get a new feature where we could reduce the need for another plugin or add-on, those are very welcome and this one, well we could take out one of those plugins we might have been using for our mega menus. So inside this video I'm going to show you how to get started building the new mega menu. Also I do got some pros and cons. I did a lot of experimenting. I wanted to get an in-depth look and feel into this new feature. There's a lot I like about it but I did find a couple downsides which I'm going to break down towards the end of the video. To get started you got to go back over to your settings in Elementor and to the features and from here you got to make sure you turn on your menu and then you also need to activate your nested elements. It does give you a note right here about that. Now one thing really important to note at the time of making this video, this was just released. It's just a first look on how to get started. It is an alpha and it is a bit buggy. We're probably going to see some bugs as we look at it. This is not ready for a live site yet but if you are seeing this later and if it's in the beta stage or if it is down here in the stable features then it should be good to go. Back here in the front end now. I've already started a header template to get a quick start. If you are brand new to Elementor and want to learn how to do this from scratch I am adding a link inside the description that shows you how to make a header from scratch using containers and all that. So we want to just get a quick jump start and dive right into the mega menu. From here we're going to see a new widget. It just says menu but this is the mega menu widget right here. Now we have another widget right here called WordPress menu. This is the old original nav menu widget. They just changed the name. So if you want to use just your regular menu like you have been using now you would use the WordPress menu and nothing else has changed that I could see on it except for the name. Let me go ahead and delete this and let's go ahead and take a look at the mega menu. So I'm going to drop in this menu widget. Let me change the text color so we can see it because it's against that black background. All right so here we go. So we have our menu items here and let me add these in really quick. I'm going to make a really quick generic menu. Just going to do like home services. We'll make the services our drop down. All right I'm going to add about us and then a contact page. We're going to keep this very very generic. I just want to show you how to get started. Now you could add as many items as you want in here just like it would be a regular menu. All right cool. Now from here we need to add links to every one of our items. If you don't add a link it's not going to go anywhere so make sure to add your links and say like right here okay my link is probably going to be something like services and I want to make this right here my mega menu. I want to create the drop down. All I got to do is toggle this on and check this out. Okay you could already see the drop down indicator right there. When you click on it now you have this container drop down and from here we just start adding elements. You see there's the container right there. So check this out. This is this is the elemental way of doing things. They simplify it and make it really easy to do this in a visual builder. So you could add in as many elements or whatever you want to add in right here. Style it up design it the way that you like. And just for context this mega menu that I built right over here this was all done just with the new mega menu builder no additional plugins no add-ons no custom code either. The way that all of this is achieved is just like how you would build a section like this or any section on your website. You would add a container add your elements in the container style it up and there you go. So we could play around with this and we could have some fun like I could drop in I could drop in an icon list and let's say we want to make you know the drop down have a couple different rows. Let me change the text here and change this to what we do. I'm going to make this really simple. Let me style it up using my globals and let's see we could do something like that. I'll add some padding right down here see 20 pixels on the bottom and then we could add in sub menu items and then you know you could put in your own SVG. Let's say I want to make different SVGs for this I could have some fun and some creative freedom. All right let me go ahead and duplicate this we'll make this into four menus. You go ahead and style it like you normally would. Let's go ahead and add some space in between let me see 12 pixels. The text I will add a button text right here the color we can keep it right here but this is how we get started and we could go ahead now and build out and design. Now my tip for designing a mega menu to design one say that looks like this would be to find your inspiration. You could even use this one as your inspiration and then just replicate it or use it for your design process. So when you're building it out you would just build it out that way. Okay now the next thing we want to look at though this is all wrapped up in a container and okay there's a few things going on right here. First you could see when I hover over this element it stretches it takes up the rest of the space. That really isn't how Flex has been working with all of our other stuff like let me go ahead and let me just add in a new container here for just for reference and to show you. All right I could put in a logo and then I could drop in the older menu right here so let me drop in the menu and you could see the pink box you know the new pink box with the new UI. You can see though how it wraps around the element but right here it doesn't do that as stretches so it took me a little you know a little playing around with to figure it out and the reason why is let me go back over here. The reason why is we have this option for content width. We have full width which is going to go the whole distance. Let me give a background color it'll make it easier to see so I could go to this container and style it up. I'm going to throw in a background color. I'm going to give it this blue color which means I need to readjust all the other colors here. All right this will make it easier to see so we got this full width and then the other option is going to be fit to content. Now right now it's hugging in and this is where I'm finding the bugs happening. I'm finding the bugs happening inside the front end inside the builder with the containers and flex hopefully this will be flushed out soon but if we say we start adding let me go back to full to full width. All right I'm going to add in an inner container so that way we could create columns like what I have done here. So let me grab some containers. I'm going to drop in some inner containers. All right let me duplicate this and duplicate it again. I'm going to draw my elements into it. I got this element here. Let me drop that in there and now I'm going to go to my outer container and use my flex controls. I am going to let it go to the site. All right now I could even let me say I could even duplicate this and add in my columns. So now I could style up each column add what I want to add in it. For example right here maybe I don't want to have menu items maybe right here I want to add an image. I could drop and let me find an image. Okay this looks cool. We'll add that right now and then if we go back to our back to our menu over to the content width now we could put it to fit to column and well yeah it's acting a little weird and it's all good you just got to go in and play with it. Like I said this is a bit buggy right now and it should get flushed out soon. Let me go ahead and space this out. We'll set this to 33 and then I could fix it up later but as you guys already could see it is quite a bit buggy right now. It really doesn't work that great inside the editor. It took me time. I had to play around with it quite a bit in order to get my mega menu design to come out right but it is a bit touchy but this is just an alpha right now. This is only to give you a first look into how to get started so that way you could play around with it. Like I would create a staging site something fun and just geek out and see how it works because this could be something that you use on some future projects or if you are watching this in the future and it's already fixed up well you won't be having these issues I'm pretty sure of. So let's take a look at the rest really quickly just so you could see what is inside this mega menu widget. So we have these menu items we have the content width and we have the content horizontal positioning and this is just about it. These are all exactly the same as it has been on the nav menu widget. Now the only other difference that we are going to see is going to be here in the drop down effect. You could have it on hover or you could have it on click and then you could have the animation on fade in which I do prefer. I think the fade in is a lot more smoother. Also I do like the click as well but this is all based on personal preference and then you can see here we have a much smoother experience. Now when you are designing it and you're building it you want to use the outer container and I do like to use the navigator here. Now this is just a tip this is why I found it helped me out right here. I would start to rename a lot of these things right over here like this one item two I would make this my service drop down because it could get a bit you know it could get a bit messy even here you might want to rename the menu items like you know I put the name of the link and one other thing too is if we do click on the menu items here let's go ahead and close this one up we have like this menu item it's actually a container right here but the container isn't activated until you select it to become a drop down. All right another really quick tip right over here is to style the outside of the container. So I would go in and I would style up and control everything inside my menu item containers I go ahead and put in 20 pixels here maybe I could even put a little bit more if you're using border radiuses we could go over here and add a border radius maybe I'll put three all right or let me do four I could add a box shadow to this to make it stand out and give it some more depth let me change this to 40 this one to 10 and I'm going to put a little bit of under depth on that one and you can see we got a much better experience right here it takes a little bit of time and you know because of the bugs and where it's at right now but I'm sure once this is flushed out and after a few updates and getting this to the beta the stable release this is going to be dope this right here though is just an introduction now once this has become more stable I am going to create some videos on how to make a design like this more of a walkthrough of the design process this one is just a first look at how to get started and what to look for when you are getting started with the mega menu builder overall I'm digging this I think it's dope and one of the things I like most about this new mega menu is that it's done in a traditional element or fashion where they have clearly prioritized the ease of use for the front end user I mean everything is done right there you go into your menu and you build your mega menu right there you don't have to go through a template you don't have to go through a back end it's all in one section right there in front of you visually it reminds me of what they did with the loop builder I see where they're going with this and I really like it this is elements were stopped but there are a couple of downsides and the first one this is one that's important to me and this is going to be for the SEO the HTML marker for behind the scenes in the source code are not the best for SEO now if we take a look at the original nav menu widget that was incredible for SEO take a look at the HTML for the original nav menu widget all right so the HTML I've always dug this about the original nav menu widget it's super clean like we have the nav tag right here which wraps around the menu followed by the ul followed by the li followed by the a there are no divs it is perfectly clean and if we were to hand code uh menu this is how it will look now if we were to go over to the new mega menu and we look at it we have the nav right here but then it is just divs so we have all these divs right here there are no ul's no li's it just is divs with an a and then if we do go over to uh one of our elements that does have a drop down well in the drop down as well well you see we're just going to have a lot more divs and then whatever is built in there so if you do got a project or a website where SEO is a priority you might want to consider not using this feature right here because it really isn't going to be the best solution for a well SEO optimized website and downside number two is going to be the mobile version or I should say lack of mobile version because it just isn't there all right I tried I tried turning this mega menu into mobile it is a headache to do like I wouldn't even do it I would just hide it and use another solution for the mobile menu also for the mobile options they're just the same as they were for the nav menu widget that we've always had which are just super super limiting it's something that I have been vocal about and praying and hoping that elemental releases I would love to see elemental release a mobile menu builder a good solution even if it's just an off canvas hopefully maybe some cool like toggle animations things like that that's just me though how about you would you like to see elemental release something for mobile menus if you do let him know drop him aside the comments because elemental is listening they're listening right now it's really clear with the features that they're releasing and features we have coming up real quick you might notice a different background that's because I'm out traveling so you're going to be seeing a lot of different backgrounds in the next several videos but I will be back in my studio soon that's it for this video thank you for watching and I'll be back again soon one more element or and WordPress related content thank you