Let's learn how to make an Elementor Mega Menu using only CSS, and 0 extra plugins! It even works with Elementor Free.
Mega menu plugins add bulk to the web page, loads extra CSS and JS files, and requires you to create a template for every sub menu area. Not so with the method shown here!
Very lightweight way to create a mega menu, and super easy to maintain: edit everything right in the editor, as you normally would. No separate templates needed.
Elementor No Plugin Mega Menu Template
This download gets you the following template :
Elementor No Plugin Mega Menu Template
Related tutorial : Elementor Mega Menu Using CSS Only! No Plugins Needed!
To begin with, create your Elementor Mega Menu header template
If you have Elementor Free, this tutorial will still work, but you won't be able to create a header template using the Theme Builder. Elementor Pro is required for this.
When it's ready, add a new section, and set it up properly
Set your section layout settings to full-width.
Also set Columns gap to 'no gap', and Vertical align to 'middle'.
Under advanced, set z-index to 99.
Don't make it sticky yet (if you want it sticky).
Then, adjust the column settings
There should only be a single column in your section.
Set Horizontal Align to 'Space-between' and HTML tag to 'nav'.
Now, add every element you will want in your Elementor Mega Menu
Just those showing by default for now (without hovering).
I used the image element, heading elements, and a button element.
Set them all (under Advanced) to z-index:11 and width: inline (under Positioning).
Give the heading elements the class 'nav_item'.
After this, add inner sections to create each sub menu area
When you got everything ready and looking the way you want, add an inner section per 'mega' sub menu that you want.
Give them the class 'menu_content'. Also give them a z-index of 9.
Design each inner section accordingly to what you will want to show up on hover.
Then, open the navigator and move each inner section
Move each inner section right after the header element that you want the be the 'parent' menu item.
It will mess up the styling of the page a bit, but that will be fixed when we will add the CSS.
For example, your navigator should look like this, if you have two sub menu items like in my demo.
Finally, add the Elementor Mega Menu CSS
Copy paste this CSS in your header template CSS area (if you are using Elementor Pro), or see how to add custom CSS with Elementor free article.
You will see this after clicking the gear icon, in the lower left corner of the editor.
.menu_content{
position: absolute;
top:47px;
opacity: 0;
pointer-events: none;
}
.menu_content:hover, .menu_content:focus, .menu_content:focus-within{
opacity: 1;
pointer-events: visible;
}
.nav_item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 76px;
}
.nav_item:hover + .menu_content, .nav_item:focus-within + .menu_content {
opacity: 1;
pointer-events: visible;
}
Modifications and improvements
See this YouTube Video for a walk through, and better explanations of the CSS.
To add a dark overlay on the rest of the page, while the sub menu areas are opened, add this CSS.
Also remove top and bottom padding that is applied to these 'sub menu' inner sections for better results. Then, adjust the 'padding' value in the CSS to fit your design.
.nav_item:hover + .menu_content::after , .nav_item:focus-within + .menu_content::after, .menu_content:hover::after, .menu_content:focus-within::after {
content:'';
position: fixed;
width: 100%;
height: 100vh;
left:0;
pointer-events: none;
overflow: hidden;
background-color: rgba( 0, 0, 0, 0.34)
}
.menu_content .elementor-container{
padding: 3%;
}
To make the nav items stay together, on the top right part of the screen, add this CSS.
Adjust the padding to your liking, to space the menu items in between themselves.
Change the 'nth-of-type' value, in case it differs. You need to enter the first header element position, as seen in the navigator. For example, if you have two logos images before the first header (one for mobile, one for desktop), change the (2) to (3).
.nav_item{
padding: 0 23px;
}
.nav_item:nth-of-type(2){
margin-left: auto;
}
Let me know if everything works for you!
25 Responses
Thank you so much ! It used to work very well. But for a few days, it has not been displayed in front.It displays well on elementor. So why ?
Hello ! I could not say. I would need to have a look at the page. Did you try the usual, regenerating CSS, refreshing the servers, etc?
Thanks so much! Work great. However, I didn't managed to make it sticky on some pages. Any clue? Best
Hey Marc! I would need to have a look at these pages to know why it might not work there...
Hi, love this post. I have Elementor Pro but the positioning property is not available on colums. Has that changed? Does that change the approach?
Hey Jaap! I'm not certain what you mean here. No changes to the positioning of the column are required for this design!
Figured this one out, no worries
Thank you so much! It works perfectly on my site.However, for some days I've been trying to add animation effects on the dropdown menus. I would love to have the dropdown menus fade in and out when hovered on. The entrance animation won't work and it's been difficult finding the proper css code for it. Could you explain how I could make this work?
Hi! Is it possible, to open the sub menu only on click at the parent menu item?
If you not solved this, just set focus instead of hover and it works fine.
Thomas Hultgren That works yea!
Hi very nice menu thanks! I'd like to, as Mario Depauly say in his comment, have an onclick instead of hover. Is that simple to ad? Thanks in advance.
Indeed, replacing :hover with :focus allows for on click instead of hover, but it might not be 100% reliable in all cases... on mobile in particular, it might cause problems.
If you don't use the mega menu on mobile, then it should be fine!
Hi Maxime, thanks for your awesome content! Question, is it possible to highlight the active menu item? For example, if you click and land on the page "About us", that the according menu item is styled differently? Thanks a lot!
I found a simple hack, for all of you who are interested: just give the menu item an ID and use that ID (for example #about-us) in the CSS on the page you want that specific menu item to look different.
Thanks for sharing!
Is there a way to ad transition to it?
I have tried with transition: opacity 1s
But it doenst work
Hey Ariel!
Yes it's possible. add this:
.menu_content{
transition: 0.3s opacity!important;
}
Cheers!
Hi Maxime, I love your work. I am wanting to create sub menu items from the sub menu ie top level there is a nav menu item of 'courses', when you hover there appears below 4 different course categories in my inner section and when you hover over those I'd like another level to appear below each course category where I can list all the courses in that category.
I have tried by inserting inner sections in the inner sections (which I could do) but I think I might need more code or it needs to be done differently. Any tips?
BTW I have managed to get the course categories to show up perfectly using your method 🙂
Hey Gemma!
Yes I think you might need a little bit more code to make this work fine for another level. Generally the code should still work by following the exact same setup, however the 'top' value for example will need to be changed for these sub sub navs.
try adding this css, and adjusting the top value to fit your needs:
.menu_content .menu_content{
top:247px;
}
Hi,
Great tutorial, works fine and save me a lot of speed adjustment to make on the regular mega menu addons.
I have used it in mobile as well, made an icon as the "nav_item".
Is it possible to close the mega menu on second click of the icon? as in regular menu..
or make a "close" button?
Hey Or!
Yes it's possible, however outside the scope of this tutorial. At some point I might make a premium version where mobile will be considered. For now it's a 'desktop only' design!