elementor mega menu stratum

How To Build a WordPress Mega Menu with Elementor and Stratum

The default WordPress navigation menu, which is styled up by your theme, allows you to use pages, posts, categories and URLs as menu items. This means you are rather limited as to what you can customize in the menu – one of the central parts of your site that helps you get the most out of your online presence.

For different types of sites this limitation might mean different things: worse product presentation for ecommerce stores, fewer chances to better highlight top posts for blogs and magazines, etc.

This is when mega menu plugins for WordPress come into play.

Not only can they add more diverse content types to your submenus, these megamenu plugins are also quite handy for making small customization tweaks in the main menu. For example, adding custom badges and tags, changing background colors, etc.

The whole thing with a mega menu is to give you more freedom as to what your menu can contain and how it can look.

So in this post, we’re going through the process of creating a WP navigation menu with the Stratum Mega Menu addon for Elementor, our brand-new plugin WordPress mega menu plugin for creating a content-rich menu using Elementor widgets and advanced customization tools.

Although we distribute this WordPress megamenu plugin under the Stratum name (Stratum is a collection of extra free widgets for Elementor), the Mega Menu addon works without Stratum. By relation to Stratum, we mean it’s our lineup’s branch of solutions for Elementor.

So, to build a mega menu in WordPress, only the core Elementor plugin and the Stratum Mega Menu addon are required.

WordPress Mega Menu addon by Stratum: what’s in it for you?

wordpress megamenu elementor

Well, pretty much like any other megamenu WordPress Elementor addon, this one opens up many opportunities as to ‘hacking’ into your default WordPress menu.

In particular, the plugin helps you:

  • Display any Elementor widget with your content in submenus, including in columnized layouts
  • Add custom tags and icons to the top-level menu
  • Change the visual styling of your top-level menu and submenus
  • Create both vertical and horizontal navigation menus
  • Tweak the responsive menu for mobile devices
  • Make your submenu appear with different animation effects.

Now let’s see how it works in the real-life examples and go through our WordPress mega menu tutorial.

Step 1. Create or select a menu

First off, install and activate the Stratum Mega Menu plugin.

Since it’s a premium solution, it’ll cost you at least $29; at the same time, the Mega Menu plugin free download is possible for the MotoPress Club members.

To start working with the plugin, Elementor must be already installed and activated.

There is a short mega menu tutorial that you can always have at hand: head to Dashboard > Appearance > Mega Menu to see it.

The first step of this tutorial asks you to go to your Dashboard > Appearance > Menus.

In Menu, you need to select the current menu (in case you have a working site and menu) or build a new one using default WordPress tools, that is, by adding menu items. Make sure to remember the name of your menu!

default wordpress menu

Step 2. Customize your top-level Elementor menu

For each menu item, you’ll see the ability to add icons and badges.

stratum mega menu

Icons

As for icons, you can either upload your custom SVG icons or choose one from the library. You’ll be able to set an icon color as well.

download icon top menu

Badges

For badges, it’s easy to add your custom text, apply text and background colors.

badge startum mega menu elementor

Of course, you may not add any of those if you are looking to improve only submenus.

Step 3. Create mega menus for the chosen menu items

If you want to build a content-rich drop-down menu, make sure to click on the Enable Mega Menu box and click the Edit Mega Menu button:

enable mega menu wordpress elementor

The default Elementor visual builder interface will open. Here you’ll be able to create a submenu for the menu item you chose.

  1. Start with adding a section.

add elementor section mega menu

2. Organize columns (if needed). For example, you might need columns if you want to showcase many items/pages/products/images in the submenu.

columns mega menu

3. Apply the needed background color (if needed).

4. Add the needed Elementor widgets into the columns/column and customize the look of those widgets via Elementor’s style tab.

elementor widgets

Each widget has its own styling settings depending on its type.

You can create a mega menu with Elementor for any menu item you choose – as well design it and style the way you want.

Once done, update the page in Elementor > get back to the Menu in WordPress > Save menu.

save menu

For example, let’s go through a few examples we created with the Stratum’s mega menu plugin for the demo purposes. There are different Elementor widgets and columns used in the submenu:

  • One-columned submenu: the Icon list widget with adjusted icons and links:

icon list in the menu

And a three-column layout with a few more adjustments:

mega menu elementor stratum

  • A gallery widget:

gallery widget stratum mega menu

With the Stratum’s Masonry gallery widget, you can give your galleries a truly fancy and nifty look.

  • Blog posts in submenus powered by different layouts and meta information output:

blog posts submenu

  • Shop items and product presentation powered by WooCommerce widgets as well slider widgets:

woocommerce mega menu

You can see more examples in the WordPress Megamenu demo.

On this stage, the look of your menu depends on how creative you can get with Elementor and what widgets you have access to.

Step 4. Replace the default theme menu with a WordPress megamenu

How to add a menu in Elementor?

To use the WordPress megamenu you created instead of the default one provided by your WordPress theme, you need to hide the latter. One of the easiest ways to do that is to use an Elementor canvas template that doesn’t use a menu:

page attributes

After choosing the needed template in the ‘Page attributes’ menu, open the Elementor editor and add a mega menu you created to the page:

mega menu elementor canvas

Then select the menu you created:

wordpress mega menu

Also, choose whether you want it to be vertical or horizontal:

Horizontal

horizontal menu

Vertical

horizontal mega menu elementor

You can also apply the default submenu appearance animation effects.

Now you can globally, for the entire menu, customize the styling. The Mega Menu Elementor addon by Stratum is pretty generous here! For example, let’s take a closer look at the Style tab to see what you can alter.

Menu globally

  • Width, paddings, borders, background type (classic or gradient)
  • Alignments and shadows
mega menu settings global

Item style (first level and nested levels)

  • You can customize the alignments, add borders and apply the needed box shadow
  • Change typography, text color, and more.
nested levels

Icon and arrow style

  • Change the spacing, alignment, size and color.

Badge style (first level and nested levels)

  • Customize paddings, margins, box shadow, border type, border radius, typography, background colors, etc.

Dropdown style (first level and nested levels)

  • Width options

Responsive settings

  • Optionally turn on the hamburger menu for mobile devices
  • Change the alignment and styling for the menu.
mobile menu settings

The WP mega menu will be transformed into a handy Elementor hamburger menu on mobile devices:

mobile menu settings

Once you applied all the needed settings and are satisfied with your menu, simply save the page.

The only hassle of this method is that you’ll need to do one extra procedure – interesting this menu – manually for each page of your site where you want it to appear.

But that also allows you to use different menus on different pages since you can create separate menus. Alternatively, you can create a custom Elementor header with the Elementor’s theme builder and use your custom Elementor menu globally with less effort.

The New WordPress Megamenu plugin for Elementor by Stratum

Don’t lock you down with the default theme menu styling. If you want to create a custom Elementor menu without the need to involve technical experts, the Stratum Mega Menu addon is a must-have solution.

It’s relatively affordable, still very powerful and feature-rich. It provides unlimited customization features for literally every part of your menu, helps you improve a top-level navigation menu and build fantastic submenus presenting any content in the best light.

Will this plugin work without Elementor or Stratum?

This is a mega menu addon only for Elementor-based sites. The Stratum Mega Menu is a standalone plugin, though, it doesn’t require the Stratum widgets plugin. To build a navigation menu with this addon, two plugins installed and activated are required: Elementor and the Stratum Mega Menu addon.

What types of sites can I use this plugin for?

The Stratum Elementor Mega Menu addon is aimed at all types of sites that require advanced and categorized navigation menus, for example, for e-store or photography sites. The plugin is also a great solution if you want to build a vertical-oriented menu.

Where do I add and manage the menu?

There is a short mega menu tutorial that you can always have at hand: head to Dashboard > Appearance > Mega Menu to see it. The first step of this tutorial asks you to go to your Dashboard > Appearance > Menus.

Leave a Reply

Your email address will not be published. Required fields are marked *