Mega Menu Builder

Table of Contents
  • Step #6: Create a Header Template
  • Final Output

    • 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
    • Click on Header=> 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.
    What are your Feelings