How to Build a Mega Menu With Elementor and ElementsKit

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

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.

Create Mega Menu using Gutenberg

If you have built your website in WordPress blocks editor, you can also create mega menu easily and smoothly. GutenKit block editor plugin comes with the easiest way of creating WordPress mega menu in Gutenberg.

With GutenKit, you can create the enitre menu in the editor and design mega menu in both vartical and horiozontal orientation.

All you need is to install GutenKit Pro plugin and start building your beutiful site in Gutenberg.

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!