Mega Menu Builder

Table of Contents

** NOTE : In order to use our megamenu feature you must have to use our EKIT nav menu widget for the menu section (https://prnt.sc/t7senb) on the header.

Get Started #

Build custom header footer with ease, no complex settings to confuse you anymore! Use any element-widgets you like.

Watch our video guide:

Or, follow the step by step instructions:

1. Make sure Megamenu module is ON from ElementsKit → MODULES

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

Checkbox “Enable this menu for Mega menu content” => Click on the Mega Menu with Setting Icon on which Menu item you want to add the Mega Menu.

Customize Megamenu Content #

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

2. Click the Ekit Template library icon, then navigate to Headers

3. Click on Header=> Mega Menu Content=> Insert any Mega Menu

4. Edit Inner section by clicking the doted Section

Layout #

Content Width Box #

  • Select Box : Customize your Content Width by dragging Right or Left
  • Showing accordingly to the site

Content Full Width #

  • select Full width
  • Showing Full Width to the site

Column Gap #

  • Column Gap=> Select your Column Gap from drop down.

Height #

  • Select your Height dragging Left to Right

Vertical Align #

  • Select Vertical Align from the Drop Down

Overflow #

  • Select Overflow Default or Hidden

HTML Tag #

Select your HTML Tag from Drop Down

  • Click ‘Update‘ to save the menu= Preview the Mega Menu on the Front-End. Click on Manage with Live Preview=> Watch the menu on the site

Icon #

  • Now go to Icon Tab=> Choose any color from the Color Palette
  • Select Icon from the Icon Library
  • Now Go to the Site=> Selected Icon and Color Appeared

Badge #

  • Add or Edit Text
  • Choose Badge Color
  • choose Badge Background Color
  • Click Save
  • Showing Badge Text and Color

Settings #

Default Width #

  • Select Mega Menu Width: Default
  • Select Mega Menu Position: Default
  • Save
  • Site View: Showing Default Width with Default Position
  • Select Mega Menu Width: Default
  • Select Mega Menu Position: Relative
  • Save
  • Site View: Showing Default Width with Relative Position

Full Width #

  • Select Mega Menu Width: Full Width
  • Select Mega Menu Position: Default
  • Save
  • Site View: Showing Full Width with Default Position
  • Select Mega Menu Width: Full Width
  • Select Mega Menu Position: Relative
  • Save
  • Site View: Showing Full Width with Relative Position

Custom Width #

  • Select Mega Menu Width: Custom Width
  • Provide any custom width but by default it is : 750px
  • Select Mega Menu Position: Default
  • Save
  • Site View: Showing Custom Width with Default Position
  • Select Mega Menu Width: Custom Width
  • Provide any custom width but by default it is : 750px
  • Select Mega Menu Position: Relative
  • Save
  • Site View: Showing Custom Width with Relative Position
What are your Feelings