Mega Menu

< All Topics

If your website has a lot of menu items and a normal menu is not enough to display them, it is wise to use a Mega Menu. A Mega Menu is an advanced version of a normal Menu using which you can display a complex sitemap in a more presentable way. You can even add Products, Blog Posts, Contact Forms, Images, etc. to these mega menus and make it look rich.

Pro tip
Mega Menus are often seen on bigger websites such as Ecommerce, News, Industrial, etc. that have a huge number of pages and categories. But, that doesn’t mean other business sites cannot use them. If you have fewer pages and categories and still want to take advantage of a Mega Menu, you can do it by being a bit more creative. Why not showcase your portfolios, related images, latest blog posts, contact form, etc and make it look super-rich.

How to use the Mega Menu Widget of The Plus Addons For Elementor

The Mega Menu widget comes with three different layouts i.e. Horizontal, Vertical, and Vertical Toggle. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Make sure the TP Navigation widget is activated. Navigate to The Plus Settings > PlusWidget. Press Ctrl + F and search for TP Navigation to search for it and activate it.

After you activate it, you will see one new menu added in your WordPress Dashboard called “Plus Mega Menu”.

Now, click on the Plus Mega Menu Custom Post Type. After that, click on Add New. Give it a Title and then click the Edit with the Elementor button and start creating your Mega Menu section. You can add any widget of your choice to build your Mega Menu section.

All your Mega Menus will be created in this post type. Later, they will be integrated using the Navigation Menu widget.

Note: If you are not able to edit the single post and have an error, You can reset your permalink structure to fix it.

Creating New Template using Plus Mega Menu

Once you have click on the Plus Mega Menu section you need to create new templates that you need to show on your Header Menu. Clicking on Add New will give you an option to create a new item for creating a Plus Mega Menu. Once done, click on Publish option to save the Menu name that you have created for your site. This menu name will be shown on your Appearance >> Menu section to choose the menus to be displayed on the header area.

Editing the Mega Menu

Now, you have created the Plus Mega Menu so you need to create a Template using the Elementor. You need to click on Edit with Elementor in order to create a Mega Menu for your site.

Adding the Mega Menu to WordPress Menu

Now that you created Mega Menu posts, it’s now time to add them to your Dashboard > Appearance > Menus.

Now, create a navigation menu and add your preferred Mega Menu from the Plus Mega Menu section.

After you add it, you will see your added Mega Menu inside the Menu structure. Now, create one more menu item (It can be Custom Link, Page, or a Post). You can also rename it if you want. Now, drag your Mega Menu under it as a submenu.

Creating Menus

Since you have created the Mega Menu using the Elementor you need to Navigate to Appearance >> Menu section in order to add the items that are available in Plus Mega Menu

In case if you cannot find the Plus Mega Menu option in the menu section click on the SCREEN OPTIONS located on the top right corner of the screen and click on the Plus Mega Menu option. With that done you can add the relevant Plus Mega Menu items to the menu. After that, you will notice many items that you can edit to create an attractive Mega Menu for your site.

More MegaMenu Options

Click on the down arrow to expand more mega menu options.

Navigation Label

If you are using a Custom Link, you need to add a label to it. In the case of Posts or Pages, you can keep the default label or you can change it.

Text Label

You can add a small Text Label as well to your menu. For eg: You can add a Sale Label to your Shop page.

Label Color

Add a color to your label text.

Label Background Color

Add a background color to your label

Icon Type

You can add a FontAwesome Icon or add a Custom Icon Image

Mega Menu Type

You get three options to choose from:

1. Default
In which you can select size of your mega menu width in pixels

2. Container
In which your mega menu’s width will be based on the container of your website

3. Full Width
In which, your mega menu will expand to full width regardless of the website’s default container or other settings.

Adding the menus in header

Finally, you have created Plus Mega Menu Template and you have added that template items on your Appearance >> Menu section. Now it’s time show the Plus Mega Menu on your site. Once everything is done, edit your site using Elementor and use the Plus Navigation Menu on your site. You will find options to select menu and you need to choose the mega menu in order to show on your site.

navigation menu

Applying the Mega Menu through the entire website

Now that you have built a mega menu for your website, its time to display it through the entire website. You have to override your activated theme’s menu with the newly created Plus Mega Menu.

To do this, you need Elementor Pro. If you have it installed, navigate to Theme Builder. Click on Add New

A popup will be shown to you where you have to choose the template type as Header and name your template. After that, hit the Create Template button.

Now, it will take you inside the Elementor Builder page and open another popup asking you to import a template. Close it.

Search for the Navigation Menu widget from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Navigation Bar

Select your preferred menu layout. We have provided three layouts i.e. Horizontal, Vertical, and Vertical Side (Toggle).

Select Menu

Select your desired menu. The one which you made under Appearance > Menus

Menu Hover/Click

Select your desired effect for the menu. This means you can either set a hover or click effect to open the menu.

Menu Effects

Select your desired effect for the menu dropdown.

Extra Options


Select your preferred menu layout. We have provided three layouts i.e. Horizontal, Vertical, and Vertical Side (Toggle).

Sticky Menu

Slide the button to Yes to enable the sticky (fixed scrolling) menu.

Mobile Menu

Responsive Mobile Menu

Slide the button to Yes to enable the responsive mobile menu. After you enable it, you will see more options as mentioned below.

Menu Type

Select your preferred menu type from Toggle or Swiper.

Open Mobile Menu

Use the slider to set a value at which your mobile menu will open up.

Toggle Style

Select your preferred toggle style from the dropdown.

Toggle Alignment

Set your preferred toggle alignment. You can set it to left, right, or center.

Navigation Alignment

Set your preferred toggle alignment. You can set it to left, right, or center.

Menu Content

In Menu content, you will have two options to choose from

Normal Menu

If you will select the Normal menu, You will have the option to show a different menu in a mobile device, Which you can make without mega menu sections in it.

Template Menu

You can make one Elementor template and choose that in 2nd option called template Menu. Which will give you full freedom to customize your mobile menu in Elementor.

Select Menu

Select your desired menu for mobile. The one which you made under Appearance > Menus

Mobile Click Close Menu

Set which Process/Step icon stays active by default.

Mobile Menu options in Mega Menu widget.

2. Style

The Style tab is used for customizing the appearance of all the Mega Menu widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0.5 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?