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.
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.
2. Once you activate it, You will see one new menu added in your WordPress Dashboard called “Plus Mega Menu”.
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.
3. Select “Plus Mega Menus” and add them in to navigation menu by pressing “Add to menu”.
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.
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.

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

Add Comment

Want to supercharge your Elementor based Website?
Fastest, Biggest and most Advanced Elementor Addons. It will change the way you are working with elementor.