Creating a mega menu in Elementor is easy with ElementsKit, and it doesn’t require Elementor Pro. ElementsKit offers a dedicated Mega Menu module that lets you design rich, multi-column menus using Elementor’s visual editor.

Watch the video guide on Elementor Mega Menu Building:

Or, follow the step-by-step instructions on how to create mega menu in Elementor:

Prerequisite: #

• Elementor, a page builder plugin (Free version is enough)
• ElementsKit Pro, a WordPress mega menu plugin for Elementor

How to Create WordPress Mega Menu in Elementor #

First of all, before creating an Elementor Mega Menu in WordPress make sure to enable the ElementsKit Mega Menu module.

• Navigate to ElementsKit on your WordPress dashboard
• Go to Modules
• Find and turn ON Header Footer and Mega Menu
• Save the changes

Step 1: Configure WordPress Menu #

To create a WordPress mega menu on your website –

• Navigate to Appearance > Menus from the WordPress dashboard.

• Enter a Menu Name.
• Click on the Create Menu button.

Add pages to the mega menu and save the changes.

You can also add items to the mega menu. For that,

• Expand Custom Links on the “Add menu item” on the right column.
• Enter a URL and Link Text.
• Click on Add to Menu.

Then add other menu items in the same way with this WordPress menu customizer, ElementsKit.

After that, make sure you’ve checked the checkbox for “Enable this menu for Megamenu content”. When the mega menu is enabled, you will click the mega menu settings icon when you hover on the menu items.

Step 2: Customize Elementor Megamenu Content With ElementsKit #

When you click on the mega menu settings icon, a popup will open. On the popup,

• Toggle button to enable Mega Menu.
• Click on the Save button.
• After that click the EDIT MEGAMENU CONTENT button. It’ll take you to the Elementor editor button.

In the next step, a window will appear where you need to click on the ElementsKit Template Library Icon.

• Go to Sections
• Search mega menu
• Select a Megamenu template from the list and insert

You’ll see that your inserted pre-designed mega menu template item will display. Edit the Inner section by clicking the dotted Section.

Container

• Container Layout: Select the structural system, like Flexbox, to organize your elements.
• Content Width: Choose between Full Width or Boxed for your horizontal boundaries.
• Width: Set the specific horizontal percentage or pixel size.
• Min Height: Set the minimum vertical space the container must fill.
• Items Management
• Wrap: Allow items to move to a new line when they run out of space.
• Direction: Stack items vertically in a column or horizontally in a row.
• Justify Content: Distribute items along the main axis, such as center or spaced out.
• Align Items: Control how items align along the cross axis, using start, center, end, or stretch for consistent vertical or horizontal positioning.
• Gaps: Define the exact pixel spacing between individual items.
• Wrap: Control whether items stay on a single line (no-wrap) or break into multiple lines (wrap).

Additional Options #

• Overflow: The Overflow property manages content that exceeds its container by using Default, Auto, or Hidden settings.
• HTML Tag: The HTML Tag defines the element’s structural role as a Div, Header, Main, or Nav.

Customize Mega Menu Heading Text #

Content #

• Title: The Title option allows you to enter your primary Heading Title, add a custom Link, and assign a specific Title HTML Tag like H2, for better SEO.
• Subtitle: Here you can toggle the visibility of the subtitle, a border subtitle, a header subtitle, and choose if the text appears Before or After Title.
• Title Description: This provides a toggle to show description, enabling an extra block of text to explain your heading in more detail.
• Shadow Text: Enable it and add a decorative, large background text layer behind your main title for a stylized look.
• Separator: The separator control lets you show separator to insert a visual dividing line between the header elements and the rest of your page content.

Style #

• General: The General section provides an Alignment control to position your content to the left, center, or right.
• Title: The Title settings allow you to customize the Color, Hover Color, and Typography, while also managing the Text Shadow and Margin for proper spacing.
• Focused Title: The Focused Title options offer advanced styling for highlighted text, including Text decoration color, Padding, and toggles for background color on text or text fill.
• Subtitle: The Subtitle section lets you set the Color and Typography, adjust the Margin, and configure a Subtitle Border Left with a custom Background Type or Image.

Customize Text #

Content #

• List: Here you can Add or Edit Text and Sub-Title for each entry, while also providing options to Enable to Show Label, Add or Edit Label text and more.
• Settings: The option lets you choose a Layout style, set the link Target to Blank, and toggle the visibility of the Rel attribute.

Style #

• List: You can adjust the padding, margin, border type, box shadow, etc. of the texts.
• Icon: It lets you customize the icon position, vertical alignment, background type, size, etc. of the icons associated with each list item.
• Text: You can change the texts with color, margin, typography, etc., of the main item titles.
• Subtitle: To style subtitles, adjust their color, typography, padding, and more from here.
• Label: The label style options enable you to customize the typography, margin, padding, border radius, alignmnets, etc.

Step 3: Create a Header Template #

Next, you have to create a header and preview it.

• Go to the ElementsKit Header Footer from your dashboard
• Create a header or open the existing one

To learn how to create a header, check this detailed documentation on the Header & Footer Builder

Here you go, the mega menu has been successfully created.

However, if you want to personalize the icon, badge, and other settings of the mega menu, then follow the next step.

Step 4: Customize Icon, Badge & Settings #

Go to menus and personalize icons, badges, and settings if you like.

Icon #

• Click Icon Tab
• Choose any color from the Color Palette

1. Click Select Icon
2. Search the icon you want to set
3. Select the icon

Badge #

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

Settings #

1. Mega Menu Width
Choose how you want the width of the mega menu to appear:

• Default Width – Uses the standard width.
• Full Width – Expands the menu to cover the full width of the screen.
• Custom Width – Allows you to set a specific width (750px by default).

2. Mega Menu Width Position
Select how the width will be aligned:

• Default – Applies the standard positioning.
• Relative – Positions the menu relative to its parent element.

3. Enable Ajax Load: Controls how the mega menu content is loaded. Set to Yes to load content dynamically without a page refresh, or No to load it normally with the page.

Now you’re ready to build and customize your own mega menu simply with ElementsKit.