Create Free Elementor Mega Menu with Elements Kit

In this tutorial, I’ll show you how to create free elementor mega menu using the Elements Kit mega menu builder for your Elementor website. You will learn how to create mega menus from scratch or simply use premade sections from Elementor or Elements Kit.

All you need is to create your header section with Elements Kit and then enable a mega menu on the main menu allocated to that header or navigation. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Free Elementor Mega Menu Builder

Adding the Elements Kit Mega Menu Builder

In your Dashboard go to Plugins and click Add New. In the add plugins window search for the Elements Kit plugin and when it shows up, just install and activate it. (00:23)

Once you’ve activated the Elements Kit addon, it will show up in the Dashboard. 

tyiaGAU3HAAuTJmVM7T2dXFZoRlEv1iv7Nw jK5VIxut8Hy2

Click on Elements Kit to open it up and it will take you to the welcome screen. 

When you go to Elements on the Elements Kit dashboard it shows you all the available elements that you can use in your website for free, and it also shows you the Pro elements. 

In this tutorial, however, we are interested in the Modules. So click on the modules and then make sure the Megamenu option is enabled/activated. After turning on Megamenu, go to the Header Footer option and also make sure it is turned on/activated. This is because you’ll need to create a header and a footer before creating a mega menu. (01:07)

rC7V7TSLdmhSJ1qlYMVprUqV9UwuWpLdNL9pv28SIQP7YkJ0n1jmQRtXRz8EdWw1sGCHquf0EN0CqAUqjIyvKOtSOuiQdy8n vNpP13kdmVv 3tCa6utTX7oWyyAr4g McW8RZND

Note:

You can not use the Elements Kit Mega menu module if you have your headers and footers created with Elementor, you have to have created them with the Elements Kit for it to work.

Creating Headers and Footers

The first step after activating your modules is to create headers. 

Under Elements Kit select My Templates then in the Templates section click the Add New button.

To learn more on how to create headers and footers using Elements Kit, refer to this tutorial:

Creating A Free Elementor Mega Menu

When you have your header and footer ready, go to Appearance in your Dashboard, under Appearance click on Menus. Here, make sure your main menu is selected, that’s, the one you’re using in your header. Once your menu is selected, go under Elements Kit Mega menu and check (✔) the Enable this menu for Mega menu content option, then click the Save menu button. (01:52)

cXhvIPQzA1p6Kswd1Ld35GhWIXVjVpTB hmDoeCAQDi79X RIjZcluQAtkOzDCQSqKiu6hh4N3INjkF5QTtgsowY7pf6gY87qk96TsQYFwXoR3AHA PA k5Jiqsdrnrd7lMEzaFu

After you save your menu, now you can add a mega menu to any of the pages, when you hover over each page you can see the mega menu option shows up. So click on the mega menu button on the About page, when you do, a new window pops up, enable the mega menu option then click edit megamenu content. (02:25) 

Free Elementor Mega Menu Builder

When you click on the edit option it takes you to another page where you can create sections for your mega menu.

To add your templates click on the folder (📁) icon to take you to the Templates area (02:41). Go to the Blocks option and you can select a block to use then insert it in your editor. 

r8Rpf6ukCtBS sVBcEiAZCK6n0gWU3o1AyDabpHXw cuySZQ9QuCwXozKYIxl2UwPMPdMvwQ82omqBGIpkJDit5XaPvproKpl5hqEviL9shusGbtVGTorQZP150IswrxDE1g6 EU

Alternatively, you can create your templates/sections from scratch by clicking the (+) icon then you add column sections and then widgets from the widgets library to your column sections. (03:03) 

ELWXdBItS9XcSy4JQyfcYfVu8vtL Xf9cQSUSpe Sv8Cq0mHUgRKsyBXx FtHzIjrvlOFeB574 VwMVPtE8m2cKL0iO856pYVBGeCZUA62Ch

Once you are done creating sections for your mega menu, you can make them clickable so that when someone clicks on them they’re able to go to a particular page. You can also edit the styling, the color and other settings like you would in Elementor. (03:23)

v3lZL6dJuHq4O wG7curtOO7ouYlPgqLi6ymI9klOBJm vkVsJes 4dv 1WS

When you’re done, click the Update button at the bottom, then save the changes in the edit megamenu window.

Go to the Services page and go through the same process to add sections and content to your mega menu. You can also do this for any other pages you would want to apply a mega menu, using your Elementor page builder or the Elements Kit library to choose from the various premade sections available. These sections are also fully responsive on all devices.

Also Read: How to Make Animated Rainbow Text Effects in Elementor [PRO]

When you preview your page, you’ll realize that all the sections where you added the mega menu show that menu when you hover over them. (05:13)

UI1wjt4FQTPGQObIHbv11E GrD8KhTId2zBTWgiB0DGCdTtBA35dXW eZ6FJjt6A i l1GCpxTvG6kHFbv6RlR4H37UCnhETVp339DO4dW tXS0F DHtc9y6SfgTXqQdo1 bURkH

To make your menus full width;

Go to your mega menu editor and select the section, in the Edit Section area on the left, under Layout enable the Stretch Section option, then under Content Width set it to Full width. (05:40). Update and save your changes.

Ke8v 89bqILnT 4clkus 17I1S lMa5W uPxgRRJBeXJ8saRo LmlfCa3t4js7FeO05Mh0tTFvUYNhDDGfVnizD oAhb2kypUwYAuhRI0hdLkCIlfNr5peIMaZTjfZg mPha7rQI

After updating, when you reload and preview; now the menu pages are full width. (06:02)

fJP8iJiChLU9WKg1e w dq1QSJO45CkAO1CawOuduSQ6hAJ6eTFbZhRET 73VRcCwqgn7vDcUEk5un5551sLhh YkghNBWL vvjBvJPrtTahlNW3Xq ypcGul6pce75UU3V72u3

That’s how you can use the Elements Kit to create Mega Menus for your Elementor website.

Please subscribe to my newsletter and youtube channel for more tips and tutorials. And if you have any comments or questions let me know in the comments section below.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users