How to Create a Mega Menu in Elementor

January 13, 2020

464

How to Create a Mega Menu in Elementor

Mega menus are one thing of giving ease to the user on navigating a very complex and large website, such as an e-commerce store with probably hundreds of categories and tags to choose from.

On this tutorial we will learn, How to Create a Mega Menu in Elementor?

Step 1: To create the Elementor Mega Menu, our first step is to go on the WordPress Dashboard, then go to Appearance and look for the Menus button.

Step 2: Let’s then create a New Menu for the sake of this Mega Menu tutorial.

Step 3: To start the making of our custom Elementor Mega Menu, create a new (temporary) page for viewing our Elementor mega menu. Add new Section where you will place the menu.

Step 4: On the left panel, find the nav menu widget and drag it to the column.

Step 5:On the Content tab of the Nav Menu Widget, choose your desired menu you want to display.

Step 6: As you can see below is the default style of the nav menu, to make those dropdown menu bigger we will add some custom CSS on this menu.

Step 7: Get the id or class of each element below to add custom style to each other.

How to Duplicate WordPress Page or Post

After you get the id or class of the elements above try to apply this style.

Apply this style to the List Class:

ul#sm-15760584023977324-2 {
    width:1000px !important;
    left: -155px !important;
}

Apply this style to the List Item Class:

ul#sm-15760584023977324-2 li {
    display:inline-block;
}

Apply this style to the List Item Arrow:

ul#sm-15760584023977324-2 li span.sub-arrow{
    display:none;
}

Apply this style to the List Item Class:

ul#sm-15760584023977324-4,ul#sm-15760584023977324-6,ul#sm-15760584023977324-8{
    margin: -52px 0 0 0 !important;
    display: block !important;
}

Apply this style to the List Item Class Hover:

.ul#sm-15760584023977324-4 li a:hover,ul#sm-15760584023977324-6 li a:hover,ul#sm-15760584023977324-8 li a:hover{
    background-color: transparent
    ;
    color: #ed2a5b;
}

And now, we’re done!

Custom Elementor Mega Menu11