Elementor Mega Menu Using CSS Only! No Plugins Needed!

Elementor Mega Menu Using CSS Only! No Plugins Needed!

Table of Contents

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.

To begin with, create your Elementor Mega Menu header template

Elementor Mega Menu Using CSS Only! No Plugins Needed! 1

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'.

Elementor Mega Menu Using CSS Only! No Plugins Needed! 2

Under advanced, set z-index to 99.

Elementor Mega Menu Using CSS Only! No Plugins Needed! 3

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'.

Elementor Mega Menu Using CSS Only! No Plugins Needed! 4

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).

Elementor Mega Menu Using CSS Only! No Plugins Needed! 5


Give the heading elements the class 'nav_item'.

Elementor Mega Menu Using CSS Only! No Plugins Needed! 6

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.

Elementor Mega Menu Using CSS Only! No Plugins Needed! 7

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.

Elementor Mega Menu Using CSS Only! No Plugins Needed! 8

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.

Elementor Mega Menu Using CSS Only! No Plugins Needed! 9
You will see this after clicking the gear icon, in the lower left corner of the editor.

    position: absolute;
    opacity: 0;
    pointer-events: none;

.menu_content:hover, .menu_content:focus, .menu_content:focus-within{
    opacity: 1;
    pointer-events: visible;

    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 {
position: fixed;
width: 100%;
height: 100vh;
pointer-events: none;
overflow: hidden;
background-color: rgba( 0, 0, 0, 0.34)

.menu_content .elementor-container{
padding: 3%;

Elementor Mega Menu Using CSS Only! No Plugins Needed! 10


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).

padding: 0 23px;

margin-left: auto;

Elementor Mega Menu Using CSS Only! No Plugins Needed! 11

Let me know if everything works for you!

Looking for something else? Search across 2445 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly


25 Responses

  1. 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 ?

    1. 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?

  2. 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?

  3. 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?

  4. 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.

    1. 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!

  5. 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!

    1. 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.

  6. 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 🙂

    1. 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{

  7. 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?

    1. 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!

Leave a Reply