How to Build a Mega Menu With Elementor and ElementsKit

Editorial Staff

,
5 minutes
How to build a mega menu with elementor and elementkit

Can you imagine a large website without a mega menu? 
No way!

People are getting more particular about the time they spend online. A recent study shows that  94% of web users say easy navigation is the most useful feature of a website.
Almost everyone, right?

To increase the usability and ability to engage the user, the mega menu plays a vital role in enhancing the people. A simple but functional mega menu will encourage users to explore even more areas of your website and instantly take action.

Even the biggest e-commerce websites, like Amazon and eBay, are using mega menus to help users browse through a website’s entire navigation into a single menu. 

Not only an e-commerce website, but a mega menu is also a great option for any news websites, magazines, content publishers, businesses, and more. 

When building a large website with multiple categories and subcategories, Megamenu is a big multi-column expandable menu where everything is visible at once.
I am sure, so many quires come to mind! Right? 

No worries… Here I will help you to get all the answers to your queries and at the end of this article, you will learn how to create your own mega menu with ease. 

Introducing ElementsKit Mega Menu Builder

Using the feature-rich ElementsKit Megamenu Builder you can create and customize any type of Megamenu with an Elementor live content interface. 

You will get variations in the mega menu such as the Nav menu and Vertical Mega Menu along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed menu builder for your professional site. 

How to Create a Mega Menu With Elementor? 

Elementor gives you lots of functionalities to design your mega menu but to get additional functionalities you can use a third-party plugin.

Exactly, you need ElementsKit. Although there are so many plugins to create a mega menu even so ElementsKit supports different types of mega menus including vertical mega menu, horizontal mega menu, and many more customization options.

Here we will show you the step-by-step process to create a fully functional mega menu in detail.

What You Need to Create a Megamenu with Elementor

To follow this tutorial blog, you will need two things–>

Get ElementsKit
Get ElementsKit Pro

Or, follow the step by step instructions:

Make sure Megamenu module is ON from ElementsKit → MODULES.

Step #1: Add Menu

  • Click on Create a New Menu.
  • Provide Menu Name=> Check the Checkbox=> Create Menu.
  • Click on Custom Link=> Provide Link and Add Menu Items in the same way.

Step #2: Customize Megamenu Content

Check the checkbox “Enable this menu for Megamenu content” => Click on the Mega Menu with Setting Icon on which Menu item you want to add the Mega Menu.

  • A popup will open, toggle the Mega Menu option, and Save. After that click the EDIT MEGAMENU CONTENT button.

Choose Template

  • Click the Elementskit Template library icon, then navigate to Headers.
  • Click on Header=> Mega Menu Content=> Insert any Mega Menu.

Control Layout

  • Edit the Inner section by clicking the dotted Section.
  • Content Width Box: Customize your Content Width by dragging Right or Left.
  • Content Full Width: Select Full width.

Select Column Gap

  • Column Gap=> Select your Column Gap from drop down.

Choose Position

  • Height: Select your Height dragging Left to Right.
  • Vertical Align: Select Vertical Align from the Drop Down.
  • Overflow: Select Overflow Default or Hidden.

Select HTML Tag

  • Select your HTML Tag from Drop Down.

Customize Mega Menu Heading Text

  • Select Icon Type.
  • Enable to Add Icon.
  • Upload Header Icon.
  • Add or Edit Title.
  • Add Edit Description.

Customize Text

  • Add or Edit Text.
  • Add or Edit Sub-Title.
  • Enable to Show Label.
  • Add or Edit Label.
  • Customize Background Color, Typography, Padding, Alignment, Radius.

Step #3: Customize Icon

  1. Click ‘Update‘ to save the menu=> Close the editor.
  2. Now go to Icon Tab=> Choose any color from the Color Palette.
  3. Select Icon from the Icon Library.
  4. Now Go to the Site=> Selected Icon and Color Appeared.

Step #4: Customize Badge

  • Add or Edit Text.
  • Choose Badge Color.
  • Choose Badge Background Color.
  • Click Save.

Step #5: Settings

Default Width

  • Select Mega Menu Width: Default.
  • Select Mega Menu Position: Default.
  • Save the window.
  • Site View: Showing Default Width with Default Position.

Default Relative 

  • Select Mega Menu Width: Default.
  • Select Mega Menu Position: Relative.
  • Click Save.
  • Site View: Showing Default Width with Relative Position.

Default Full Width

  • Select Mega Menu Width: Full Width.
  • Select Mega Menu Position: Default.
  • Click Save.
  • Site View: Showing Full Width with Default Position.

Full Width Relative Position

  • Select Mega Menu Width: Full Width.
  • Select Mega Menu Position: Relative.
  • Click Save.
  • Site View: Showing Full Width with Relative Position.

Custom Default Width

  • Select Mega Menu Width: Custom Width.
  • Provide any custom width but by default, it is 750px.
  • Select Mega Menu Position: Default.
  • Click Save.
  • Site View: Showing Custom Width with Default Position.

Custom Default Width Relative

  • Select Mega Menu Width: Custom Width.
  • Provide any custom width but by default, it is 750px.
  • Select Mega Menu Position: Relative.
  • Click Save.
  • Site View: Showing Custom Width with Relative Position.

Step #6: Create a Header Template

Here you can use the Elementor Header Template or you can use the ElementsKit Header Template.

  • Now Search Nav Menu=> Drag the Ekit Nav Menu and Drop on the selected area. Make sure to drag the ElementsKit Nav menu otherwise your created Megmenu will not appear.
  • Go to Menu Settings=> select your created Header Menu from the drop-down.
  • You can add any type of widget from here to customize your header template.

Final Output

  • Once done, click the Update button to save the menu.
  • Now go to your site and you can see your selected Megamenu is showing accordingly.

Wrapping Up

Finally, we’ve successfully made it to the end. I hope we were able to help you with this tutorial! And now you can build a custom Elementor mega menu by using ElementsKit!

You can see all those steps in a single video here.

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

Comments

  1. Peter Avatar
    Peter
    Reply

    Hello,
    great tutorial!
    I still have a question about the Mega Menu:
    Can I open the Mega Menu by click and not by hover?
    I would be very happy for an answer.
    Greetings,
    Peter

    1. Tanjana Sabrin Avatar
      Tanjana Sabrin
      Reply

      Hi Peter,

      Thanks a lot for your appreciation. This means a lot to us. Currently, the feature isn’t available. But you can definitely request a feature for that. We’re continuously adding new features according to our customer’s needs.

      Here is the link – https://wpmet.com/plugin/elementskit/roadmaps/#ideas. Just share your awesome idea and click on the submit button. 😍

      Stay safe 😃

  2. Andrew Avatar
    Andrew
    Reply

    Hi,
    I love your mega menu builder, but I have a small problem.
    One of my mega menus is on he far right of my header and part of the mega menu disappears on the right hand side.
    Is there an option to align the mega menu to the right, left or center?

    Thanks

    1. Ayub Ali Avatar
      Ayub Ali
      Reply

      Hi Andrew,

      Without checking your site we can’t tell you what is exactly causing this issue. So, please give us your live website link or relevant screenshot to understand the problem clearly. But you can try to change the megamenu position to default by following this screenshot (https://d.pr/i/ccf6RC). Let us know the update here or better if you can open a support ticket: https://help.wpmet.com/

  3. Farzan Avatar
    Farzan
    Reply

    Hi there, thank you for the amazing tutorial! I could apply everthing, just one minor issue. In the header I have 4 pages, one of them has a mega menu if you hover over it. However, in the header I cannot click on the parent page (with the name: persoonlijk), I can only click on the items in the mega header. Can you see what I am missing? (the site is still under development, but you can see the header in the https://insight.nl/home url. I would like to have the option to also be able to click on the button PERSOONLIJK. Could you help me find out what I did wrong there?
    Many thanks in advance.

    1. Ayub Ali Avatar
      Ayub Ali
      Reply

      Hello Farzan, As this is a technical issue and you might need personalized help, I would suggest you to open a support ticket from https://help.wpmet.com/

      As our support team is very helpful, I can say that they’ll try their best to solve your issue ASAP.

      Best Wishes.

  4. Mani Avatar
    Mani
    Reply

    Thanks a lot for this great article.It is very helpful.Anyone can easily understand rather watching lots of videos on Youtube.

  5. Mellisa Avatar
    Mellisa
    Reply

    Hey,
    Great tutorial; you have explained it clearly and simply. Making a good mega menu is essential as it helps you emphasize the relationship between the items visually, helps the users know about the choices, and it assist you to use icons and images easily.

  6. David Avatar
    David
    Reply

    I have followed this tutorial exactly and my menu will NOT show up.
    When you go to the page I linked above you’ll see a menu – that’s the default WordPress menu. Just below it I used your nav menu widget and the menu will not populate.

    Any thoughts?

  7. Collin Avatar
    Collin
    Reply

    Mega Menu is great! Just on thing: I want the corresponding page to open when clicking on the menu name and the Mega Menu to appear when rolling over. How do I do that? Now, when I click, only the Mega Menu appears Thanks for the help.

  8. Margaret Avatar
    Margaret
    Reply

    Thank you for this great tutorial! Is it possible to hyperlink the Title & Description within the Mega Menu under Edit Toggle? I have a list of states and cities in my Mega Menu, but have the problem of having to list the state twice so that I can make one hyperlinked in the Paragraph section. Is there a way to eliminate this redundancy?

  9. Margaret Avatar
    Margaret
    Reply

    I forgot to add if it was possible to also have the option to hover over the Title, allowing for the cities to pop up and be selected under it. Thank you.

  10. Sami Azam Avatar
    Sami Azam
    Reply

    How we can show Mega Menu on Hamburger icons instead of a menu item?

    1. Dipa Shaha Avatar
      Dipa Shaha
      Reply

      Dear Sami
      Unfortunately, the feature you want is not available. However, you can request for this feature. ElementsKit team is always happy to receive feature suggestions.
      You can request feature using this link https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Thank you

  11. ajay Avatar
    ajay
    Reply

    I have followed this tutorial exactly and my menu will NOT show up.
    When you go to the page I linked above you’ll see a menu – that’s the default WordPress menu. Just below it, I used your nav menu widget and the menu will not populate.

    i think thre is some bug in mega menu its not working anymore now

    1. Hasib Avatar
      Hasib
      Reply

      Hello Ajay, make sure you have created a menu in the backend before creating a mega menu. And after selecting the nav menu, you need to choose which menu you want to share under the mega menu.

  12. Jy Avatar
    Jy
    Reply

    Hi,

    The megamenu works very well until I updated all the plugins, it’s weird that some of the mega menu works but some of them no and shows “no content found”, I had rollback the plugins version but cant solve the problems. Any idea what cause this issue?

Leave a Reply

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