---
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-04-10
lang: en
author: "Aditya Sharma"
description: "If you have a large website with lots of pages or an e-commerce website, having a mega menu instead of a normal menu can improve the user experience. A mega..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Mega-Menu-in-Elementor_-1024x536.jpg
word_count: 776
---

# How to Create a Mega Menu in Elementor?

## 

- Utilizes the Navigation Menu widget from The Plus Addons for Elementor to create a mega menu.
- Requires installation and activation of The Plus Addons for Elementor to access the mega menu features.
- Involves creating Elementor templates for each top-level item using the Plus Mega Menu option in the Dashboard.
- Resolves Elementor editor errors by resetting permalinks in WordPress settings.

If you have a large website with lots of pages or an e-commerce website, having a mega menu instead of a normal menu can improve the user experience. A mega menu is a large drop-down menu that displays multiple options or submenus in a structured and organized manner. 

With the Navigation Menu widget from The Plus Addons for Elementor, you can easily create a mega menu on your Elementor website.

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

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its 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)

### Create Elementor Templates for Mega Menu

To create the mega menu using the Navigation Menu widget, you have to create Elementor templates for each mega menu top level item.

Once you’ve enabled the Navigation Menu widget, you’ll see the Plus Mega Menu option in the Dashboard.

Then, to create a mega menu item, follow the steps - 

1. Go to **Plus Mega Menu** > **Add New**.

2. Add a name to the template and click on **Publish**.

3. Once done, click on the **Edit with Elementor** button, then create the menu using any Elementor widgets and then update the page.

![plus mega menu add new](https://theplusaddons.com/wp-content/uploads/2023/10/plus-mega-menu-add-new.png)

Also read [5 best Elementor mega menu plugins.](https://theplusaddons.com/blog/best-elementor-mega-menu-plugins/)

Following this process, you have to create all the top level menu items that you want in your mega menu.

#### Elementor Editor Error

Some users might see an error in the Elementor editor while opening the menu item.

![elementor editor error](https://theplusaddons.com/wp-content/uploads/2023/10/elementor-editor-error.png)

If you see this error click on the **Go Back** button.

Then go to **Settings** > **Permalinks** and you have to reset the permalinks.

To do this in the **Permalink structure** select **Plain** and click on the **Save Changes** button.

Once saved again select your previous permalink option and click on the **Save Changes** button again.

Now, your permalink is reset, and you can easily edit the Plus Mega Menu item in Elementor.

### Create the Menu

Once you’ve created all the mega menu templates, you have to create a menu in WordPress.

1. Go to **Appearance** > **Menus**.

2. Click on the **create a new menu** link. Add a name to the menu and click on the **Create Menu** button.

3. Then click on the **Screen Options** at the top and check the **Plus Mega Menu** option. Now you’ll see all the Elementor templates you have created for the mega menu under the **Plus Mega Menu** tab.

4. Select the items you want to add to the menu and click on the **Add to Menu** button. Those items will be added to the menu.

5. Now, you have to add a parent item for each added menu item using the **Custom Links** option. So the mega menu items are closed by default.

> *Note: You can also [make the mega menu fullwidth](https://theplusaddons.com/docs//create-a-fullwidth-mega-menu-in-elementor/) by selecting Full Width from the Mega menu Type dropdown in the parent menu item.*

Did you know? You can [create a sticky menu in Elementor.](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/)

Then, drag and drop to place the mega menu items under the appropriate custom link items.

You can open each menu item to get more mega menu options. But you should make these adjustments to custom link items only as they will also affect its child mega menu items.

**Label Color** - From here, you can add a label color.

**Label Bg Color** - From here, you can add a background color to the label.

**Icon Type** - From here, you can add an icon or image to the item.

**Mega menu Type** - From here, you can set the mega menu container width of that particular menu item. You can set the width to default, container or full width.

When you select the default width, you’ll get options to set a custom width for the mega menu and content alignment.

5. Once you’ve created the menu click on the **Save Menu** button.

### Add the Menu

To do this, add the Navigation Menu widget to the header template and follow the steps -

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* 

1. Select the **Default** from the **Menu Type**.

2. Then select an appropriate option from the **Menu Direction** section. Let’s select the **Horizontal Menu** option.

3. Finally, from the **Select Menu** dropdown, select your mega menu from the **Content** tab.

You can select the appropriate submenu hover event and effect.

That’s it now you’ll have a beautiful mega menu.

Also, read [how to create a side mega menu in Elementor](https://theplusaddons.com/docs//create-a-side-mega-menu-in-elementor/).