How to Create a Mega Menu in Elementor

January 13, 2020

368

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 Send Contact Form 7 To Multiple Email Addresses

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