How To Build A Mega Menu With Elementor And The Plus Addons

Do your site visitors need to hover over an awkward drop-down, in the hopes of picking the right option? Then you need a mega-menu. In this tutorial, we’ll show you how to create your own custom WordPress mega menu using Elementor and The Plus Addons.

Looking for an easy way to create a WordPress mega menu?

Mega menus are big expandable menus where everything is visible at once — visitors don’t need to hover over an awkward drop-down to try and pick the right option or dig into your footer to find what they’re looking for.

Because mega menus are so useful, they’re a pretty universal option on many successful websites, from the big e-commerce stores like Amazon and Walmart to big publishers like NBC News and many other sites — may be your site as well by the end of this post.

However, WordPress doesn’t support mega menus by default. So unless your theme already has its own built-in mega menu feature (which is usually limited anyway), you can’t take advantage of this useful design tactic. That’s why we’re here to help.

In this tutorial, we’ll show you how you can create your own custom WordPress mega menu using Elementor and The Plus Addons. You’ll be able to customize every part of your mega menu using Elementor’s visual interface and you can even use display conditions to show different mega menus on different parts of your site.

Most importantly, you’ll also be able to control responsive behavior, including an option to use different menus or templates for desktop vs mobile visitors.

Learn How To Create a Sticky Sidebar Menu

When Should You Add a Mega Menu in WordPress?

Mega menus are a great option for a wide variety of WordPress sites. In the words of research-based user experience experts, Nielsen Norman Group, “mega menus work well for site navigation… They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.”

That’s a pretty good summary — mega menus provide a user-friendly option to highlight deeper content on your site.

You only have so much space on your top-level navigation menu. If you try to fit in more than six or so top-level navigation items, your menu will start to feel cluttered and overwhelming. However, you probably have more than six important pages on your site, so a mega menu gives you a user-friendly way to still make it easy for your visitors to find those other pages.

One niche where almost every single site uses a mega menu is e-commerce. Online stores have all types of lower-level categories that are important to show to visitors. A mega menu lets you do that in one stroke:

This is a huge upgrade from the “old” way of doing things, which was building stacked menus with lots of submenus. This required the visitor to be a master “hoverer” and one mistake would send them back to the beginning:

An example of the “wrong” way to display lots of menu options

Here’s a couple of examples of the big e-commerce stores that use mega menus:

Walmart

Etsy

Mega menus aren’t just for e-commerce stores, though. This tactic makes a great option for any type of website where you need to make lots of lower-level information accessible to your visitors.

For example, news websites, magazines, content publishers, businesses, etc. Here are some examples of the diverse ways that various sites incorporate mega menus into their designs:

USA Today

Yelp

Tilda

Duvine

Quasar

What You Need To Design a WordPress Mega Menu With Elementor

Elementor gives you a visual drag-and-drop builder with all the design capabilities you need to create your mega menu. However, to add the actual functionality to achieve the mega menu effect (beyond just the design), you’ll need the help of a third-party add-on.

Specifically, you need The Plus Addons. While there are other plugins that can add mega menu functionality to Elementor, The Plus Addons’ mega menu feature makes a great option because it supports a variety of different types of mega menus including vertical mega menus, horizontal mega menus, toggle-based mega menus, and more.

It also offers the following benefits:

It’s 100% designed for Elementor so it fits seamlessly into the interface and is compatible with all other Elementor widgets and features.
It lets you build pixel-perfect responsive menus. You can even use different mega menu templates for mobile vs desktop visitors.
It has cross-browser support so that all of your visitors have a great experience no matter what they’re browsing with.
You get lots of customization options to create a mega menu that perfectly matches your needs.
You can design everything using the familiar Elementor interface — there’s no need to use code or learn a new interface.
It’s compatible with all popular WordPress themes.

For the rest of the post, we’ll focus on showing you step-by-step how to set up a WordPress mega menu using Elementor and The Plus Addons.

How To Add a Mega Menu in WordPress

There are four basic steps involved to create your mega menu with Elementor and The Plus Addons, along with a few sub-steps in each. Here’s a high-level look at the process:

Activate the mega menu feature and create your mega menu template using Elementor.
Set up the native WordPress navigation menu to include your mega menu (Appearance → Menus).
Create a header template using Elementor Theme Builder.
Set up your responsive mega menu.

To get started, make sure to install the following plugins:

Elementor
Elementor Pro – you need this to create a custom header.
The Plus Addons – while there is a free version at WordPress.org, you need the Pro version to access the Navigation Builder feature.

Step 1: Activate Mega Menu Feature and Create Template

In this first step, you’ll need to activate the mega menu feature in The Plus Addons. Once you do that, it will add a new Plus Mega Menu custom post type to house all your mega menus. You’ll then create a new post in that post type and use Elementor to design everything.

Activate Mega Menu Feature

In your WordPress dashboard, go to ThePlus Settings → Plus Widgets and activate the TP Navigation Menu widget:

Create a Mega Menu Template With Elementor

Once you activate the widget, you should see a new Plus Mega Menu custom post type. It will show up as its own option in your dashboard sidebar menu.

Click on Plus Mega Menu and then click Add New to create a new mega menu:

Give it a name to help you remember it (this is useful if you want to use different mega menus in different places). Then, click Edit with Elementor to launch the Elementor interface.

Now, you’ll use Elementor to design the actual mega menu. That is, you’ll design the layout and content that will appear when a user activates the mega menu.

Here’s an example of what a basic mega menu might look like – we’ve also expanded Elementor Navigator so you can see the structure that’s going on:

You can see that there’s one parent section for the entire mega menu and we’ve added four columns inside to control the different columns in the expanded menu. Then, you can add whatever content you want using all the regular Elementor widgets.

Once you’re happy with the design, make sure to save and publish your template.

2. Set up the Native WordPress Navigation Menu

Once you’ve created your mega menu template, the next step is to configure the native WordPress navigation feature.

To do that, go to Appearance → Menus. If you haven’t already created a menu, you’ll need to do so. Then, you can add the content that you want to display on your menu.

First, add your regular top-level menu items for important areas. These menu items will not trigger a mega menu. The easiest way is usually to use the Custom Links option to link directly to pages.

Then, to add the top-level menu item that does trigger the mega menu, open the Plus Mega Menu section in the Add menu items sidebar and add the mega menu template that you created in the previous step.

Don’t see the Plus Mega Menu option in the “Add menu items” area? That probably means that WordPress is hiding it. To fix this, click on Screen Options in the top-right corner and make sure that the box for Plus Mega Menu is checked:

Then, you can use the settings for that item to customize its size and alignment. For the size, you can choose either:

Default – enter a maximum width in pixels.
Container – based on the container size of your website.
Full Width – the mega menu will expand to full-width regardless of your website’s settings or any other settings.

You can also customize the menu item’s label, label colors, and icons (if you want to add an icon).

3. Create a Header Template With Elementor Theme Builder

Next, you need to use Elementor Pro/Theme Builder to create a custom header for your website.

Go to Templates → Theme Builder and create a new Header template. Or, if you’ve already created a header template, you can edit your existing template. You can either choose one of the existing header templates or design your own from scratch.

In the Theme Builder interface, you can also use Elementor Pro’s display conditions to control where on your site this header appears. You could either show it sitewide or limit it to only specific content.

Once you have the basic outline of your header ready, you need to add the Navigation Menu widget from The Plus Addons:

You can then use the widget’s settings to control the menu direction — e.g. horizontal, vertical, or vertical side menu:

Once you’ve made your choice, use the Select Menu option to choose the menu that you created in the previous step (when you set up the menu in Appearance → Menus):

Those are the only choices you need to make. However, for additional customization options, you can consider the other options in the Style tab.

4. Set up Responsive Mega Menu Behavior

To finish things out, you need to set up the responsive behavior for your mega menu so that visitors have a great experience no matter which device they’re using.

You can set this up from the same Navigation Menu widget that you used in the previous step.

Expand the Mobile Menu settings in the Content tab of the widget’s settings. Then, enable the Responsive Mobile Menu setting. You can also use the Open Mobile Menu setting to configure the responsive breakpoint for where to show the mobile menu layout:

In the Menu Content drop-down, you can choose which menu to display to mobile visitors. You can either display the same menu that you created in Step #2. Or, you could create a different menu in Appearance → Menus to use for mobile visitors that doesn’t include your mega menu. Or, you could even create another template with Elementor and assign that to Elementor visitors. You can choose whichever approach works best for your site.

And that’s it! You just learned how to create a responsive mega menu using Elementor and The Plus Addons.

Create a Custom Mega Menu for Your Own Website

If your site has a lot of content/categories that you need to present to visitors, a mega menu is the best way to make those navigation items accessible while still keeping your site clean and user-friendly. That’s why you’ll see mega menus used by so many different websites.

WordPress doesn’t make it easy to create a mega menu by default. But with Elementor and The Plus Addons, you get the ability to create your own custom mega menus using Elementor’s visual, drag-and-drop interface.

Create your first mega menu today and enhance your WordPress site’s navigation. To get started, install Elementor and Elementor Pro and grab your copy of The Plus Addons.

Do you still have any questions about how to create a WordPress mega menu with Elementor and The Plus Addons? Ask us in the comments!

Facebook Comments