How to create advanced mega menu in elementor? All Elementor Mega Menus Compared.

Mega menu is essential in Huge projects to increase User Experience (UX). Most of all popular websites with complex sitemap needs mega menu to present all their pages properly under nice UI. If you are making magazine or ECommerce Store, You also can use mega menu to showcase most important or Latest products/posts in mage menu based on their categories. Possibilities are endless with Mega menu and all higher end websites have that on their website.
I suggest to read definition of Mega Menu as per Nielsen Norman Group at their article on “Mega Menus Work Well for Site Navigation” It will provide more insights about Mega menu.

If you are looking for different ways to make mega menu with elementor or mega menu with elementor pro, You have various ways. Process of building Mega Menu with Elementor pro and 3rd party addons are widely popular. You may use different mega menu providers in elementor. Most popular mega menu builders in Elementor are The Plus Addons Mega Menu ,They have Vertical Mega Menu , Horizontal Mega menu , Toggle based Mega Menu and lots of other options. In the Elementor you also have options to make mega menu with max mega menu, jet mega menu, clever mega menu, and a few others. All those have their own advantages and disadvantages while making mega menu with elementor.

Horizontal Mega Menu The Plus Addons for Elementor
Vertical Mega Menu Graphics The Plus Addons for Elementor
Vertical Toggle MMenu The Plus Addons for Elementor
It’s time to choose the best elementor based mega menu provider, Which can be useful to make horizontal mega menu with elementor pro/free, vertical mega menu with elementor pro/free as well as toggle mega menu with elementor pro/free. Most importantly, It works perfectly fine with popular WordPress Themes and you can make mega menu in Astra free version and the pro version. We have tested the plus addons mega menu in OceanWp as well as Hello WordPress Theme. OceanWP Mega menu works totally fine without any bugs or performance glitches.

Let’s move to process of making Advanced Mega menu with The Plus Addons.

This process is in total 4 Parts and each will have multiple steps to perform. Here is the list of all main parts.
  • Part 1 : Mega Menu Activation & Initial Setup
  • Part 2 : WordPress Navigation Setup
  • Part 3 : Make Header in Elementor Page Builder with Navigation Widget
  • Part 4 : Bonus : Responsive Options with Responsive Widgets
Before starting this, We are assuming, You already have WordPress , Elementor Free / Elementor Pro, and The Plus Addons Pro versions are installed and activated.

Mega Menu Activation & Initial Setup

1. Make sure, “Navigation Menu” Widget from The Plus Addons is activated from WordPress Dashboard -> The Plus Settings -> PlusWidget.
navigation widgets screenshot The Plus Addons for Elementor
2. Once you activate it, You will see one new menu added in your WordPress Dashboard called “Plus Mega Menu”.
Mega menu post type The Plus Addons for Elementor
Go to custom post type “Plus Mega Menu” and Make new post there and edit it with elementor. All the mega menus you will need to make here and later we will integrate them from using our widget “Navigation Menu”.
Note : If you can not edit the single post and having error, You may reset your permalink structure to make it work. Here is a quick tutorial for that.

WordPress Navigation Setup

1. We are assuming, You already have created some posts in “Plus Mega Menu” Post type, We will use that while making navigation menu. Go to Dashboard -> Appearance -> Menus. Create any simple navigation menu with pages or custom links as per your needs.
2. Make sure, “Plus Mega Menus” is visible in Menu Items. If that is not available there, Make sure to turn on that from “Screen Options” which is on a top right part of dashboard.
Screen options plus mega menu The Plus Addons for Elementor
3. Select “Plus Mega Menus” and add them in to navigation menu by pressing “Add to menu”.
add menu plus mega The Plus Addons for Elementor
4. Once you add them in navigation menu, It will all visible together. You need to add each as a sub menu under each main menu. For example, If you are adding “contact” mega menu block under the “Contact Us” Page in menu, You need to choose “Contact” block as a submenu of it by dragging just a bit on a right side.
contact sub menu The Plus Addons for Elementor
5. When you expand that mega menu, You will have options for Label and Mega Menu Type. There are three types of mega menu size, 1. Default : In which you can select size of width in pixels, 2. Container : In which Your mega menu’s width will be based on container of your website., 3. Full Width : In which, You mega menu will expand to full width regardless of website’s default container or other settings. For Label option, You can add text, colors and icons for that.
contact screen shot The Plus Addons for Elementor

Make Header in Elementor Page Builder with Navigation Widget

1. Make Your header page/template to use in your website. You can make it with Elementor Pro or If you theme have feature, You can make it with Elementor Free version as well.
2. You need to select widget called “Navigation Menu” and drag and drop it in elementor area.
Navigation menu elementor The Plus Addons for Elementor
3. You need to select Menu Type from options available such as Vertical menu, Horizontal Menu and Vertical Side menu. You can select them based on your needs of mega menu. If you need Vertical mega menu or vertical Toggle Mega Menu, You need to select “Vertical Side Menu” and If you want Horizontal Mega Menu, You need to select “Horizontal Menu”.
4. Select menu, Which you have made in dashboard -> appearance -> Menus as per previous part. Once you select that, You are good to go now.
5. You may play with other options in elementor widget to make it look better with cosmetic and alignment options.

Bonus : Responsive Options with Responsive Widgets

In this mobile first world, We can not ignore mobile devices,and their menu structure. We have widget dedicated to mobile menu called “Mobile Menu” Which is totally unique but if your needs are not suitable to that. We have some points to make your mega menu look amazing in small devices.

1. In Widget “Navigation Menu” -> In “Content Tab” -> You will have option of Mobile Menu. As you know, Mega menus are made for bigger screens, They will mess up in small screen unless you have quite minimal mega menu designs. If you want to change mega menu to mobile friendly new menu, Turn that option on.

Navigation mobile menus The Plus Addons for Elementor
2. Select from which screen size by option called “Open Mobile menu”, You want to convert your mega menu to new mobile menu. That value is in Pixels.
Mobile menu start The Plus Addons for Elementor
3. In Menu content, You will have two options to choose from, 1. Normal menu and 2. Template Menu. If you will select Normal menu, You will have option to show different menu in mobile device, Which you can make without mega menu sections in it. Or You can make one Elementor template and choose that in 2nd option called template Menu. Which will give you full freedom to customise your mobile menu in elementor.
Normal menu navigation The Plus Addons for Elementor
Template menu navigation The Plus Addons for Elementor
We hope you will got in depth idea about how to make mega menu in elementor page builder using The Plus Addons for Elementor.
You also can take a look at our video tutorial :
If you have any questions, You may leave comments below or reach to The Plus Addons Support forum for further technical support.
You can join the plus addons facebook community for further discussion.

Leave Your Comment

Follow Us


Subscribe us for Amazing Updates and News about Elementor.