Don’t know how to create a mega menu in WordPress? Then follow this doc, where it is explained in a few simple steps. It is so easy to follow that anyone can create a mega menu in WordPress after following the steps.
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 then Update button to save the menu.
- Now go to your site and you can see your selected Mega menu is showing accordingly.
