Mega Menu Builder

Overview #

Using the feature-rich ElementsKit Megamenu Builder you can create and customize any type of Megamenu with an Elementor live content interface. Here’s a comprehensive article to explain every method in detail. Follow the step-by-step process to create the Megamenu.

Watch our video guide:

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=> Create Menu

• Expand Custom Links=> Provide URL and Link Text=> Click on Add to Menu.
• Add other Menu Items at the same way.

• 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.

Step #2: Customize Megamenu Content #

• A popup will open, toggle the Mega Menu enable option then Save after that click EDIT MEGAMENU CONTENT button

• Click the ElementsKit Template Library Icon

• Go to Sections=> Click on the Category=> Select Megamenu from the list.

• Insert any Mega Menu Content.

• You’ll see your inserted item will display.

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.
• Once done click update and close the window.

Step #3: Customize Icon #

• Now go to Icon Tab=> Choose any color from the Color Palette.

• Select Icon from the Icon Library.

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. Let’s see to to add it.

• Navigate to ElementsKit→ Header Footer→ and click Add New.
• A popup box will open with options.

• In the popup box type a Title, select the Type→ Header.
• Select the Conditions→ Entire Site.
• Toggle the Activation option and click on Edit With Elementor.

• Select your Structure from the selected area.

• Now Search Nav Menu=> Drag the Ekit Nav Menu and Drop on the selected area.

** Note: Make sure to drag the ElementsKit Nav menu otherwise your created Megmenu will not appear.

• Now 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.