Mega Menu Builder

Table of Contents

Overview #

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

** Note : Inorder to use our Megamenu feature make sure you have used our ElementsKit Nav Menu widget (screenshot) for your navigation menu on the header which is must. Otherwise the megamenu feature will not work.

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 ElementsKit Nav Menu Widget and Drop on the selected area.

** Note: Make sure to use the ElementsKit Nav Menu Widget. Otherwise, your created Megamenu 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.
What are your Feelings