How to Create a Mega Menu using Elementor only

and some custom code (works with Elementor Free also!)

Many people are wondering if it is possible to create a wonderful menu with pictures, icons, etc.using only Elementor! and the answer is... YES! well almost... only Elementor and custom code! Here is how!

However, before we begin, let's look at the pros and cons...

Pros

Fully Customizable
Any Element Can be Used
Get Exactly the Look You Want
Can be Sticky
Rest of Page can Become Dimmer

Cons

More Difficult to Make Compatible With WordPress System for Menu*
More Difficult to Make Than a Simpler Menu
Not Mobile Ready

*You can make it with the menu elements coming with Elementor Pro or with a third party add-on, but you will have to know you to Inspect to find the right selectors. If you know how, then simply replace them instead of the columns CSS ID applied in this tutorial.

Alright, let's begin!

To start, we create a section with one column. Set 'Column Gap' to 'no gap'. Then, we simply create all the inner sections that will be used, beggining with this one

Create a Mega Menu With Elementor 4

This is a simple 6 columns inner section. This one also needs to be set to 'no gap', although you might want to add some top and bottom padding.

Then we create all the innner sections we want to appear below when we will be hovering each menu items. Should look like this after they are all created (the logo and account icons don't have any).

After this, time to give an ID to everything that requires one, beginning with the section that contains all these  inner sections. I called mine 'mainmenusection' . While you are there, increase the z-index to be certain the menu will always be over everything else!

The menu items requires a CSS ID also, but it is better to assign it to the column containing them. I gave the columns containing the titles (yes, in case you are wondering, these are just titles with links) Blog, Services, and Portfolio, 'blogopen' , 'servicesopen' and 'portfoliopen' , and the column containing the search icon, 'searchopen'.

And finally, each inner section that will pop up on hover needs a CSS ID also. called these 'blogsection', servicessection', 'portsection', and 'searchsection'.

The Code

Add this all in an html element in the same page as your menu, or in the same header template, and it should work perfectly fine! 

I included commentaries in the code to help you figure out what is what, and how to add other inner sections that would be part of the sub-menu.

<style>
   
    /*styling of the entire menu. remove position:fixed; if you don't want it to be sticky.*/

#mainmenusection {
    position: fixed;
    width: 100vw;
}

/*styling of each inner sections that pops up. if you have more sections, add them here with the same  css rules.*/

#blogsection {
    display: none;
    position: relative;
    width: 100vw;
}

#servicessection {
    display: none;
    position: relative;
    width: 100vw;
}

#portsection {
    display: none;
    position: relative;
    width: 100vw;
}

#searchsection {
    display: none;
    position: relative;
    width: 100vw;
}

/*styling to make the rest of screen darker when hovering the menu. */

.darker {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: black;
    top: 0;
    left: 0;
    opacity: 0.4;
    z-index: 99;
}

/*keyframes for the fade in animation when displaying a new menu*/

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

</style>

<!–– div to makee the screen dimmer except the menu ––>
<div id="dark"></div>

<script>
    //code to make the screen darker when hovering the menu
   
document.getElementById('mainmenusection').addEventListener('mouseover', function addDark() {
    document.getElementById('dark').setAttribute('class', 'darker');
});

document.getElementById('mainmenusection').addEventListener('mouseleave', function removeDark() {
    document.getElementById('dark').setAttribute('class', '');
});

//code to create the pop up when hovering the right columns. add the same code with the right CSS IDs if you have more inner sections opening up.

var openmenublog = document.getElementById('blogopen');

openmenublog.addEventListener('mouseover', function () {
    document.getElementById('blogsection').style.cssText = 'display:block;animation: fadein linear 0.4s 1 normal forwards !important;';
}, false);

var openmenutest = document.getElementById('servicesopen');

openmenutest.addEventListener('mouseover', function () {
    document.getElementById('servicessection').style.cssText = 'display:block; animation: fadein linear 0.4s 1 normal forwards !important;';
}, false);

var openmenuport = document.getElementById('portfoliopen');

openmenuport.addEventListener('mouseover', function () {
    document.getElementById('portsection').style.cssText = 'display:block;animation: fadein linear 0.4s 1 normal forwards !important;';
}, false);

var opensearch = document.getElementById('searchopen');

opensearch.addEventListener('mouseover', function () {
    document.getElementById('searchsection').style.cssText = 'display:block;animation: fadein linear 0.4s 1 normal forwards !important;';
}, false);

//code to make everything close when you the mouse leaves the menu.

document.getElementById('mainmenusection').addEventListener('mouseleave', function () {
    document.getElementById('blogsection').style.cssText = 'display: none;';
    document.getElementById('servicessection').style.cssText = 'display: none;';
    document.getElementById('portsection').style.cssText = 'display: none;';
    document.getElementById('searchsection').style.cssText = 'display: none;';
}, false);
   
//code to make every other inner section close except the one being hovered. add the same code with the right CSS IDs if you have more inner sections opening up.

openmenublog.addEventListener('mouseover', function () {
    document.getElementById('servicessection').style.cssText = 'display: none;';
    document.getElementById('portsection').style.cssText = 'display: none;';
    document.getElementById('searchsection').style.cssText = 'display: none;';
}, false);

openmenutest.addEventListener('mouseover', function () {
    document.getElementById('blogsection').style.cssText = 'display: none;';
    document.getElementById('portsection').style.cssText = 'display: none;';
    document.getElementById('searchsection').style.cssText = 'display: none;';
}, false);

openmenuport.addEventListener('mouseover', function () {
    document.getElementById('servicessection').style.cssText = 'display: none;';
    document.getElementById('blogsection').style.cssText = 'display: none;';
    document.getElementById('searchsection').style.cssText = 'display: none;';
}, false);

opensearch.addEventListener('mouseover', function () {
    document.getElementById('portsection').style.cssText = 'display: none;';
    document.getElementById('blogsection').style.cssText = 'display: none;';
    document.getElementById('servicessection').style.cssText = 'display: none;';
}, false);
</script>

That's it! Good job everyone!

Let me know if you need help, and show me your result!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

7 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *