---
title: "How to Create a Mega Menu in Elementor?"
url: https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/
date: 2023-10-27
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Do you have a big site or a shop with many categories? A mega menu opens a wide panel with several columns of links, images or buttons, so visitors see..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Mega-Menu-in-Elementor_-1024x536.jpg
word_count: 809
---

# How to Create a Mega Menu in Elementor?

## 

- The Navigation Menu widget from The Plus Addons for Elementor lets a site owner design each mega menu panel in Elementor and add it to a normal WordPress menu, so no separate mega menu plugin is needed.
- Plus Mega Menu panels are created in Plus Mega Menu > Add New, then published and edited with Elementor; a draft or private panel shows nothing in the menu.
- Appearance > Menus uses a Custom Link such as “Services” as the parent item, then the Plus Mega Menu panel is added as a sub item and the menu is saved.
- The Plus Addons for Elementor Pro adds parent-item fields for Mega menu Type, Dropdown Max-Width(px), Dropdown Menu Alignment, Text Label, Label Color / Label Bg Color, and Icon Type, while block themes such as Twenty Twenty-Five require the Repeater menu type instead.

Do you have a big site or a shop with many categories? A mega menu opens a wide panel with several columns of links, images or buttons, so visitors see a whole section at once.

With the Navigation Menu widget from The Plus Addons for Elementor, you design each panel in Elementor and add it to a normal WordPress menu. No separate mega menu plugin is needed.

*To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type.- **A theme that shows Appearance > Menus.** Block themes such as Twenty Twenty-Five hide it. On those, build the mega menu with the [Repeater menu type](https://theplusaddons.com/docs/create-a-menu-with-repeater-in-elementor/) instead.

## How It Works

- Each panel is a **Plus Mega Menu** item — a small page you design in Elementor.- In **Appearance > Menus**, you put each panel under a normal menu item, such as a Custom Link called “Services”.- The Navigation Menu widget shows that menu. Hovering (or clicking) “Services” opens the panel.

## Step 1: Design the panels

**Plus Mega Menu** appears in the WordPress dashboard once the Navigation Menu widget is on. For each panel:

- Go to **Plus Mega Menu > Add New**.- Give it a name and click **Publish**.- Click **Edit with Elementor**, build the panel, and click **Update**.

![Plus Mega Menu > Add New in the WordPress dashboard](https://theplusaddons.com/wp-content/uploads/2023/10/plus-mega-menu-add-new.png)

> *Keep the panel published. A draft or private panel shows nothing in the menu.*

### If Elementor shows an error

If the editor will not open a new Plus Mega Menu item, go to **Settings > Permalinks** and click **Save Changes** without changing anything. That refreshes WordPress’s links. Then open the item again.

![The error some sites show when first opening a Plus Mega Menu item in Elementor](https://theplusaddons.com/wp-content/uploads/2023/10/elementor-editor-error.png)

## Step 2: Build the WordPress menu

- Go to **Appearance > Menus** and create a menu (or open an existing one).- Click **Screen Options** at the top and tick **Plus Mega Menu**. Its box is hidden by default.- Add a **Custom Link** for each top-level item that should open a panel — for example “Services” with the URL `#`.- From the **Plus Mega Menu** box, add your panel, then drag it under its custom link so it becomes a sub item.- Click **Save Menu**.

![A Plus Mega Menu panel nested under the Services custom link in Appearance > Menus](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-mega-menu-structure.webp)

## Step 3: Set the panel width and labels

Open the parent item (“Services”). The Plus Addons adds these fields to every menu item:

| Field | What it does |
| ----- | ------------ |
| Mega menu Type | **Default** — a normal-width dropdown. **Container** — as wide as the page’s content area. **Full Width** — as wide as the browser window |
| Dropdown Max-Width(px) | A fixed panel width, 100–1920px. Only with Default, and it appears after you save the menu with Default selected |
| Dropdown Menu Alignment | **Default** or **Center** under the item. Only with Default |
| Text Label | A small badge next to the item, such as “New” or “Sale” |
| Label Color / Label Bg Color | The badge’s text and background colour. They only show when Text Label has text |
| Icon Type | An icon (by class name) or an image before the item |

![Text Label, Label Color, Label Bg Color and Mega menu Type on a menu item](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-menu-item-fields.webp)

Set these on the parent item, not on the panel. Click **Save Menu**.

## Step 4: Show the menu

Add the Navigation Menu widget to your header. In **Layout**, keep **Menu Type** on **Default** and choose **Horizontal Menu** (or Vertical Menu) in Menu Direction. In **Content > Select Menu**, pick your menu, then choose **Menu Hover/Click** and **Menu Effects**.

Your mega menu is ready.

![A full-width mega menu panel with three columns, and a New label on Shop](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-mega.webp)

## Limitations

- **Pro only.** The Plus Mega Menu post type and the extra menu item fields come with the Pro plugin.- **Widths are worked out when the page loads and resizes.** Container follows the boxed width of the section or container the menu sits in; Full Width uses the browser width.- **One level of panels.** Don’t put a mega menu inside another mega menu.- **The mobile menu shows the panel’s content too,** inside the mobile menu. Design panels that also work on a narrow screen.

## Troubleshooting

### The panel is empty

The Plus Mega Menu item is not published, or it is not a sub item of the parent. Check both in Appearance > Menus.

### Full Width is not full width

Check **Mega menu Type** is set on the *parent* item and the menu was saved. Clear the page cache afterwards.

### The badge colours don’t show

Fill in **Text Label**. The colours only style that label.

## Related Docs

- [Create a full-width mega menu](https://theplusaddons.com/docs/create-a-fullwidth-mega-menu-in-elementor/)- [Create a vertical mega menu](https://theplusaddons.com/docs/create-a-vertical-mega-menu-in-elementor/)- [Create a side mega menu](https://theplusaddons.com/docs/create-a-side-mega-menu-in-elementor/)- [Build a mega menu with the Repeater instead](https://theplusaddons.com/docs/create-a-menu-with-repeater-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before I can create a mega menu in Elementor?**
A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor Pro, plus a header template and a WordPress menu. The page also notes that the free Navigation Menu Lite widget does not include this option. If your theme hides Appearance > Menus, such as block themes like Twenty Twenty-Five, the tutorial points you toward the Repeater menu type instead.

**Q: Why is my mega menu panel blank in the WordPress menu?**
A: A blank panel usually means the Plus Mega Menu item is not published, or it is not nested as a sub item under the parent menu item. The panel has to stay published because a draft or private panel shows nothing in the menu. In practice, this is the first thing to check when the dropdown opens but no content appears.

**Q: What should I do if Elementor won’t open a new Plus Mega Menu item?**
A: Refreshing WordPress permalinks is the fix described on the page. Go to Settings > Permalinks and click Save Changes without changing anything, which refreshes WordPress’s links. That often clears editor errors when opening a new Plus Mega Menu item, so it is worth trying before rebuilding anything.

**Q: Can I use this mega menu setup on block themes like Twenty Twenty-Five?**
A: Block themes are a special case because they hide Appearance > Menus, which breaks the default menu workflow used in this tutorial. The page says to build the mega menu with the Repeater menu type instead when that happens. That makes theme choice important, because the default method depends on a visible WordPress menu screen.

**Q: What is the best way to make a mega menu full width in Elementor?**
A: Full Width only works when Mega menu Type is set on the parent item, and it needs to be saved before it takes effect. The page also says widths are calculated when the page loads and resizes, so cache can make it look wrong until you clear it. If you want browser-wide coverage, Full Width uses the browser width rather than the section width.

**Q: Why don’t my badge colours show next to a menu item?**
A: The badge colours only appear when Text Label has actual text in it. Label Color and Label Bg Color style that label, so an empty label gives you nothing to color. A practical example from the page is using text like “New” or “Sale” on the parent item, then setting its badge colours there rather than on the panel.