Create a Mega Menu in Elementor with No Plugins

The CSS needed for this is in the comments.

Mega Menus are an amazing way of having lots of additional content presented when you click on a Menu Item rather than just a Link or a Dropdown.

Let's get ready to Megamegamegamega!!!!

PPPS: Contact us for any questions or to collaborate.

PPPPS: I must stress that we only build with Elementor and no other Page Builder.

[elementhow]

Cheers good video mate! Really glad you created fresh content out of my code!

[franktielemans]

Don't know SEO would like this menu. I would recommend to set HTML tag to nav for the column that holds the buttons.

[drfcozapata]

Great!!!
Thanks a lot. Blessings from Venezuela

[lucylink]

This is fab! Thanks to you and to Maxime!

[AaronAcostaStrategy]

Got it to work! Thank you, this is awesome!

[omohamedahmed]

Cool Man, thnx a lot Love this tutorial

[bradford-vts]

Very clever and a very enjoyable video. Thanks for making it - you have a fab presenting style. Quick question - how does all this work when on a small tablet or mobile phone?

[zpeeky]

Hey man, I did apply this today and it works amazingly, almost amazingly ;P. It's a great workaround as I don't wanted to install another plugin and bloat up my website again. So this is sleek and it works great. Thank you!

I just faced 2 issues, of which I could solve one.

1) When the menu opend it was behind some other items on the website. Therefor I had to add the z-index to css and give it a higher ranking compared to other pieces on my website.
2) When I do click on a button or some content on the mega menu (not clicking a link) then the content would not change anymore by hovering over the buttons. Do you have a solution for this issue? Did you encounter the same issue?

Looking forward to hear from you.

Best regards,
Sebastian 😃

[Sofia-richardson]

But it's easy to build by using drag & drop 3rd party addons in 5min. I use ElementsReady Addons for my WordPress Website Customization, It has 100+ free & Premium Widgets with 850+ preset elements.

[Critterles]

Love this approach. Is this set in responsive to just for Desktop and then you create another header for Mobile or is there a REsponsive setting that should be used. Thank you so much for this solution..

[cartonatv-hindistories]

Can you show a real website where mega menu has been implemented with this method and it is working fine?

[healthadvisor]

Thanks very useful content in your video

[BomaBraidej]

​ @Web Squadron Also, the menu is behind the top of the page instead of in front of it. Can you point me to a video where you taught about layers of headers being in front of the top of the page in elementor pro?

[casperdevries]

Thanks a lot for the video man, it is very helpfull. I am looking for the CSS code, but I can't find it.

[angtys]

This is just what I've been looking for. Thanks so much!

[chilipalmer]

lol it's pretty hard to click any element on this mega menu items before it disappears.

[rozannew]

After doing this tutorial, I found I few things:
- My header nav section was originally set to sticky, which caused the whole menu to glitch out as soon as I moved the dropdowns below their respective nav items (literally, the footer of my page would disappear and everything just got messy 😐
- Setting the menu to sticky AFTER doing all of the work and adding in the code DID NOT cause this same issue (can't explain it, really) 🤷‍♀
- Regardless, the mega menu dropdowns still appear BEHIND the page content instead of over it, which is a problem I've seen someone else in the comments also mentioned 😫
- I can't remember seeing this in the video tutorial (might have missed it though) but I had to add the CSS Class 'menu_content' to the sections I wanted to use as dropdowns (I pretty much just figured this step out based on my limited knowledge of CSS)☝

Overall this tutorial DOES work. However, if you run into any issues, such as your dropdown displaying behind your page content, that can become more difficult to fix, especially if you don't know a lot of CSS.

The way you can realistically style your menu will also be limited. Elementor doesn't allow for inner sections to be placed within other inner sections. As a result, you won't be able to have your main menu (before the dropdowns are added) to be in a column of its own within an inner section, because then you can't place the inner section for the dropdown directly below the nav item it must drop down from (hope that explanation makes sense).

I haven't tried plugins like Jetmenu as of yet, so I'm not sure how relatively difficult or easy they are compared to this tutorial. I also can't compare the menu customisation options (would hope/assume you get more customisation with a paid plugin, however. I mean ... you're paying for it).

My verdict would be that the tutorial is good, easy to follow and (assuming you don't have issues with how your menu displays by the end), it's an easy way to get a mega menu in Elementor. However, you might not get as much flexibility in terms of styling as you'd like because of the whole inner section that can't be within an inner section problem. You need to decide whether you want to compromise on your 'ideal' menu design with THIS menu, or if you'd rather want to explore other options. If your 'ideal' menu design wouldn't bring up the whole inner section fiasco, this tutorial might be ideal for you.😁

[fulviaquaglia]

A great work around ! But when I move the cursor from the menu to reach the Mega Menu it disappeared. In order for the Mega Menu to be visible I have to click the menu button 😥

[carmenklammer]

Love this tutorial! so much energy, you are fun to watch! I had a problem: the positioning isn't coming up in my Advanced tab so I couldn't inline the buttons.
and a question: can this button then be used to click through to the relevant page? are you then deleting the top icon list?

[leonkiong]

i set a list item within the mega menu with a url link to open in a new window. Problem now is that in the original (first window), the first inner section doesn't disappear, it just stays visible even when mouse cursor is not hovering over the MM button or inner section. Any recoomendations?