Elementor Mega Menu Using CSS Only! No Plugins Needed!

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.

View the demo and download the template for the Elementor CSS only mega menu!

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!