WPMet Site Logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo

How to Build a Mega Menu With Elementor and ElementsKit

Editorial StaffEditorial Staff Updated on: August 4, 2021 Elementor Tutorials 4 Min Read
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–>

  • Elementor
  • ElementsKit
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!

  • Share :

6 Trendy Layouts for Homepages: You Must Try In 2023

Previous post

Wpmet Year in Review 2020: A Year of Growth & Empowerment

Next post

17 Comments

  • Reply
    Peter says:
    May 11, 2021 at 4:04 pm

    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

    • Reply
      Tanjana Sabrin says:
      May 24, 2021 at 12:14 pm

      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 😃

  • Reply
    Andrew says:
    July 6, 2021 at 9:22 pm

    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

    • Reply
      Ayub Ali says:
      July 7, 2021 at 5:24 am

      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/

  • Reply
    Farzan says:
    July 22, 2021 at 2:35 pm

    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.

    • Reply
      Ayub Ali says:
      September 16, 2021 at 5:55 am

      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.

  • Reply
    Mani says:
    September 19, 2021 at 8:06 am

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

  • Reply
    Mellisa says:
    December 14, 2021 at 6:56 am

    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.

  • Reply
    David says:
    January 28, 2022 at 8:29 pm

    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?

  • Reply
    Collin says:
    February 24, 2022 at 10:42 pm

    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.

  • Reply
    Margaret says:
    April 22, 2022 at 6:46 pm

    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?

  • Reply
    Margaret says:
    April 22, 2022 at 6:56 pm

    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.

  • Reply
    Sami Azam says:
    June 25, 2022 at 5:22 am

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

    • Reply
      Dipa Shaha says:
      July 3, 2022 at 4:27 am

      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

  • Reply
    ajay says:
    July 13, 2022 at 3:22 pm

    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

    • Reply
      Hasib says:
      August 7, 2022 at 6:44 am

      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.

  • Reply
    Jy says:
    November 11, 2022 at 11:56 am

    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 Cancel reply

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

Get Subscribed Today!

WPMet Site Logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

Elements Kit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT