---
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
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?

## Key Takeaways

- The Plus Addons for Elementor includes a Navigation Menu widget that allows users to create a mega menu.
- Users must create Elementor templates for each top-level item in the mega menu using the Navigation Menu widget.
- To reset permalinks in Elementor, users select Plain in the Permalink structure and save changes before reverting to their previous option.
- The mega menu can be set to full width by selecting Full Width from the Mega menu Type dropdown in the parent menu item.

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/).

## Frequently Asked Questions

**Q: What should I do if I encounter an error in the Elementor editor while creating the mega menu?**
A: If you see an error in the Elementor editor, click the Go Back button. Then, navigate to Settings > Permalinks and reset the permalinks by selecting Plain and saving changes. After that, revert to your previous permalink structure and save again. This process often resolves editing issues with the Plus Mega Menu items.

**Q: What are the best practices for organizing items in my mega menu?**
A: When organizing items in your mega menu, use the Custom Links option to create parent items for each submenu. This keeps the mega menu structured and ensures that items are closed by default, which helps in managing space and improving navigation. Additionally, consider using label colors and icons to visually differentiate menu items.

**Q: How can I add Elementor templates to my mega menu?**
A: To add Elementor templates to your mega menu, go to Appearance > Menus in WordPress. After creating your menu, check the Plus Mega Menu option in Screen Options to view your Elementor templates. Select the desired templates and click Add to Menu to include them in your mega menu setup.