How to Create a Mega Menu in Elementor - WpBuilt 1350476922971664823

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. However, setting up a mega menu is properly is not as simple as it would seem. While creating simple menus is achievable even without Elementor, you can still use Elementor to create fancy and elegant mega menus that would fit your needs.

On this tutorial, we will be doing this: 

Custom Elementor Mega Menu11b

Return now to your keyboard so we can proceed to our tutorial! 

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.

Custom Elementor Mega Menu1

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

Step 3: Creating a new menu should be self-explanatory and obvious.

Custom Elementor Mega Menu3

Step 4: Now, since we all have different websites to work form, with different sets of pages and purposes, this part will be up to you. Just be reminded that creating a Mega Menu should also make sense since this is its primary purpose.  This will be the structure of my Mega Menu.

Custom Elementor Mega Menu4

Step 5: 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.

Custom Elementor Mega Menu5

Step 6: Choose any page structure. Anything will do for this tutorial.

Custom Elementor Mega Menu6

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

Custom Elementor Mega Menu7

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

Custom Elementor Mega Menu8

Step 9: 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.

Custom Elementor Mega Menu9

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

Custom Elementor Mega Menu10

 

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

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

This Post Has One Comment

  1. Simon

    Finally I found a css solution! I am going to try this today

Leave a Reply

×

Cart