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:

Forudsætning: #

• 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 modul.

• Naviger til ElementsKit on your WordPress dashboard
• Gå til Moduler
• Find and turn ON Header Footer and Mega Menu
• Gemme ændringerne

Step 1: Configure WordPress Menu #

Til create a WordPress mega menu on your website –

• Naviger til Appearance > Menus fra WordPress-dashboardet.

• Indtast en Menunavn.
• Klik på Opret menu knap.

Add pages to the mega menu og gem ændringerne.

Du kan også add items to the mega menu. For det,

• Udvide Brugerdefinerede links on the “Add menu item” on the right column.
• Indtast en URL og Link Text.
• Klik på Føj til menu.

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

Efter det, 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.
• Klik på Gemme knap.
• After that click the REDIGER MEGAMENU INDHOLD 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
• Vælg en Megamenu template from the list and insert

You’ll see that your inserted pre-designed mega menu template item will display. Rediger den indre sektion ved at klikke på det stiplede afsnit.

Beholder

• Container Layout: Select the structural system, like Flexbox, to organize your elements.
• Content Width: Choose between Fuld bredde eller Æske for your horizontal boundaries.
• Bredde: 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.
• Retning: Stack items vertically in a column or horizontally in a row.
• Begrund indhold: Distribute items along the main axis, such as center or spaced out.
• Juster elementer: Control how items align along the cross axis, using start, center, ende, eller 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 #

• Flyde over: Det Flyde over property manages content that exceeds its container by using Standard, Auto, eller Skjult indstillinger.
• HTML-tag: Det HTML-tag defines the element’s structural role as a Div, Header, Main, eller Nav.

Tilpas Mega Menu Overskriftstekst #

Indhold #

• Titel: Det Titel mulighed allows you to enter your primary Overskrifts titel, add a custom Link, and assign a specific Titel HTML-tag ligesom H2, for better SEO.
• Undertekst: Here you can toggle the visibility of the subtitle, a border subtitle, a header subtitle, and choose if the text appears Før eller Efter titel.
• Titelbeskrivelse: This provides a toggle to show description, enabling an extra block of text to explain your heading in more detail.
• Skyggetekst: 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.

Stil #

• Generel: The General section provides an Alignment control to position your content to the left, center, or right.
• Titel: 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.
• Undertekst: 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.

Tilpas tekst #

Indhold #

• Liste: Her kan du Tilføj eller rediger tekst og Sub-Title for each entry, while also providing options to Aktiver for at vise etiket, Tilføj eller rediger etiket text and more.
• Indstillinger: The option lets you choose a Layout style, set the link Mål til Blank, and toggle the visibility of the Rel attribut.

Stil #

• Liste: You can adjust the padding, margin, border type, box shadow, etc. of the texts.
• Ikon: It lets you customize the icon position, vertical alignment, background type, size, etc. of the icons associated with each list item.
• Tekst: You can change the texts with color, margin, typography, etc., of the main item titles.
• Undertekst: To style subtitles, adjust their color, typography, padding, and more from here.
• Etiket: 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 Sidehoved og sidefod 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.

Ikon #

• Klik Ikon Faneblad
• Choose any color from the Farvepalet

1. Klik Select Icon
2. Søg i icon you want to set
3. Select the icon

Badge #

• Tilføj eller rediger tekst
• Vælge Badge farve
• vælge Badge baggrundsfarve
• Klik Gemme

Indstillinger #

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

• Standardbredde – Uses the standard width.
• Fuld bredde – Expands the menu to cover the full width of the screen.
• Brugerdefineret bredde – Allows you to set a specific width (750px by default).

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

• Standard – Applies the standard positioning.
• I forhold – Positions the menu relative to its parent element.

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

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