Easy Mega Menu for Elementor! No Plug-Ins required!

Desktop users testing the mobile version: refresh your browser after resizing the window.

Elementor Free Compatible

This mega menu tutorial uses the default 'tabs' element that comes with Elementor Free. Also used are templates from Elementor Pro, but they could be changed to Anywhere Elementor templates.

A few improvements were made after the video was recorded, in regards to the columns settings. Read that part carefully.

To begin with, create the section that will house the menu

Give it these settings

Easily Create a Responsive Mega Menu 7

Also give it a z-index value of ' 999 ' and the CSS ID ' sectionmen '

Easily Create a Responsive Mega Menu 8

Make the section sticky (if you want)

Easily Create a Responsive Mega Menu 9

Then, create three columns in that section. Insert logo, hamburger menu (for mobile), and tabs element in each column respectively.

Easily Create a Responsive Mega Menu 10

For the animated hamburger icons, download them here.

See this article for the examples to choose your preferred icon. Insert all the HTML from your preferred icon in an HTML element in the middle column.

Adjust the settings for the columns

Easily Create a Responsive Mega Menu 12
Logo column
Easily Create a Responsive Mega Menu 13
Hamburger Icon Column

The column with the tabs element will adjust automatically to the remaining space.

Adjust for tablet view (logo column 89%, icon 11%, tab element 100%)

And for mobile devices also

Easily Create a Responsive Mega Menu 14
logo is 79% , icon 21%

Display the HTML element that has the hamburger icon code only on mobile

Easily Create a Responsive Mega Menu 15

Modify its code a little bit by adding this

$('nav.elementor-tabs').slideToggle();

Easily Create a Responsive Mega Menu 16

Now (finally), build your menu!

You will need to write the title each tab like this

Change the URL and text to your own.

<a href='https://elementorcodes.com/elementor-add-ons-comparison-and-overview/'>Review</a>

Easily Create a Responsive Mega Menu 17

For the content, simply insert the template shortcode, as seen above

You will also need to create an empty first tab item. This is necessary for the code to work properly with this default tab element.

Easily Create a Responsive Mega Menu 18
'Home' here does not show up in the front end, as you can see in the example above.

For optimal results, your templates should be fully responsive and display great on all viewports. They also need to have a background color.

Finally, add all of this code in an html Element towards the bottom of the page (or header template)

<script>jQuery(document).ready(function($){
$(".elementor-tabs:first").replaceWith(function() {
return "<nav class='elementor-tabs' role='tablist'>" + this.innerHTML + "</nav>";
});

if($(window).width() >= 1025){
$('.elementor-tabs:first .elementor-tab-title').mouseenter(function(){
$(this).click();
$('nav.elementor-tabs .elementor-tab-content').each(function()
{
$(this).removeClass('clearfixede');
});
});
}

$('nav.elementor-tabs').mouseenter(function(){
$('.dark').addClass('darker');
});

$('nav.elementor-tabs .elementor-tab-title > a').click(function(){
window.location = $(this).attr('href');
});

$('nav.elementor-tabs').mouseleave(function(){
$('.dark').removeClass('darker');
$('nav.elementor-tabs .elementor-tab-title').each(function()
{
$(this).removeClass('elementor-active');
});
$('nav.elementor-tabs .elementor-tab-content').each(function()
{
$(this).addClass('clearfixede');
});
});

$(window).load(function(){
$('.elementor-tab-content').each(function() {
if($(this).html().length <= 100) $(this).addClass('clearfixede');
if($(this).html().length <= 100) $(this).prev().addClass('nodownicon');
});
});


$('nav.elementor-tabs .elementor-tab-mobile-title').click(function() {
$(this).next().slideToggle();
$(this).toggleClass('menuopen');
});

$('body').click(function(evt){
if(evt.target.id == "sectionmen")
return;
if($(evt.target).closest('#sectionmen').length)
return;
if($(window).width() <= 1025){
if($('nav.elementor-tabs').is(":visible")){
$('.hamburger').click();
}
}
});

});

</script>
<style>
nav.elementor-tabs:first-of-type .elementor-tab-title:first-of-type{
display: none!important;
}
nav.elementor-tabs .elementor-tab-content {
padding: 0!important;
position:absolute;
width: 100vw;
right:0;
margin-top: -16px;
}
.darker {
position: fixed;
height: 100%;
width: 100%;
background-color: black;
top: 0;
left: 0;
opacity: 0.4;
z-index: 99;
}
@media (max-width:1025px){
nav.elementor-tabs .elementor-tab-content {
position:relative;
}
#sectionmen{
overflow-y: scroll;
max-height: 84vh;
overflow-x: hidden;
}
nav.elementor-tabs .elementor-tab-title.elementor-tab-mobile-title:after {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f358";
font-size: 18px;
position: absolute;
color: black;
opacity: .4;
right:21px;
z-index: 0;
overflow: hidden;
margin-top: 8px;
}
.nodownicon:after{
content: ''!important;
}
.menuopen:after{
content:'\f359'!important;
}
nav.elementor-tabs {
display: none;
}
}

@media (min-width:1025px){
.clearfixede{
display:none!important;
}
}
@media (min-width:1981px){
.logocolumn{
width: 46%!important;
}
}

@media (max-width: 1024px){
nav.elementor-tabs .elementor-tab-mobile-title {
display: block;
}
nav.elementor-tabs .elementor-tabs-wrapper {
display: none;
}
}
@media (min-width: 1025px){
nav.elementor-tabs .elementor-tab-desktop-title {
display: inline-table!important;
}
nav > div.elementor-tabs-wrapper {
text-align: right;
display:block!important;
}
}
</style>
<div class="dark"></div>

@media (min-width: 1025px){
nav.elementor-tabs .elementor-tab-desktop-title {
display: inline-table!important;
}
nav > div.elementor-tabs-wrapper {
text-align: right;
display:block!important;
}
}

Et voila! Thanks for reading!
Let me know if you need help!

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

3 Responses

Leave a Reply

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