Stratum Mega Menu

The Stratum Mega Menu WordPress plugin will help you create a content-rich mega menu in Elementor. This plugin allows you to set the needed menu style and add any Elementor widget into the menu.

Installation & setup

To use the Mega Menu addon, any version of Elementor must be installed and activated.

  1. Download a .zip archive with the Stratum Mega Menu plugin files.
  2. Install the plugin from your WordPress Dashboard via Plugins → Add New → Upload Plugin → Browse → Install Now.
  3. Activate the plugin.
  4. Navigate to WP Dashboard > Appearance > Mega Menu to find a short guide on how to start creating a mega menu.

Watch Stratum Elementor Mega Menu video guides

Create or select a menu

Go to Dashboard > Appearance > Menus

  • If you use the addon with the already existing site menu, simply select the menu you want to edit.
  • If you are starting from scratch, at first create a menu you want to further edit with the Stratum addon.

There are a few changes that the Mega Menu addon brings to the default WordPress menu editing experiences right away. You can now see the extended menu settings that allow you to customize the top-level or sub-level menus in the following way:

  • Add badges
  • Add icons
  • Change colors

badges, colors

For example, let’s add a completely new menu and a few menu items to it. You can slightly customize top or sub levels using these tools. In the example below, we changed the color of one menu item and added an icon to it.

menu items

You’ll be able to further customize each item in Elementor so don’t worry if you don’t have enough styling tools here.

Create a mega menu

Go to Dashboard > Appearance > Menus

A mega menu is an advanced site navigation menu you can add to the menu items of your choice.

To build a custom mega menu in Elementor, again go to Menus and choose a menu item you wish to be opened as a mega menu when clicked or hovered. For this:

  1. Scroll down to the Enable Mega Menu section > tick the box.
  2. Click the Edit Mega Menu button.

edit mega menuIt should prompt the Elementor builder’s interface.

elementor add menu

3. Start with adding columns if you want your mega menu to have a few individual sections.

elementor layout mega menu

4. Add any widgets available in your Elementor’s widgets panel to the columns.

elementor sections mega menu

5. Style the columns and content inside them the way you want using individual widget’s settings.

You are free to add as many widgets as you wish. For example, we’re creating a shop menu so we can add a countdown Elementor widget to the Shop sale section in the menu:

countdown

When you are done with adding widgets, update the changes and close the editor.

Get back to the Menus and save the changes.

save menu

You can enable a mega menu and create it in the same way for all menu items.

Add your mega menu to the site page

Now it’s time to make your mega menus available in the site navigation menu. There are a few options how you can do it.

  1. Use a blank Elementor Canvas page

Using such a template, you can use your custom mega menu instead of the default WordPress theme menu.

Go to the page template settings and select the needed template:

elementor canvas

Open the page in Elementor > add the Mega Menu widget:

mega menu widget

Select the menu you created via the Menus screen:

menu selection

Apply the preferable widget settings via the Style tab.

mega menu siteYou can style different parts of the menu, top and sub levels; icons, arrows, etc.

mega menu settings global

The limitation of this approach is that you’ll need to do one extra thing – insert this menu manually into each page of your site where you want it to appear.

If you want to add it globally, meaning once and for the entire website, try the following approach.

2. Use the Elementor Header and Footer plugin

First, install and activate the Elementor Header and footer builder plugin.

Then go to Appearance > Elementor Header and Footer builder plugin > Add new > Edit with Elementor > add the menu via the Elementor’s interface.

menu header builder

Then go through the plugin options and apply your changes:

header builder elementor

Save the changes. Your custom-created mega menu is now displayed globally site-wide.

global site menu

If you want to apply a different menu to specific pages, just change the display rules settings via the Elementor Header and Footer plugin:

display settings