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.
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)
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.
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)
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)
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.
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)
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)
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)
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.
After updating, when you reload and preview; now the menu pages are full width. (06:02)
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.
