How to Create a Mega Menu in Elementor

0
42
How to Create a Mega Menu in Elementor

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.

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

 

Method 2. Clever Mega Menu for Elementor

KEY FEATURES:

  • RTL ready
  • Selective menu icons
  • Selective menu skins
  • Selective menu layouts
  • Drag and drop content builder
  • Conditionally show/hide menu item
  • Touch, retina and accessibility ready
  • Multiple CSS3 menu transition effects
  • Display mega menus and flyout menus responsively
  • Display widgets, shortcodes, raw HTML… responsively
  • Multiple menus per page with different menu skins
  • Build upon the standard WordPress menus system
  • Multiple menu locations with their own configuration
  • Supercharge menus with more than 100 menu skin options

Try Now

 

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments