Tech

Elementor Mega Menu


Elementor Mega Menu offers you the versatility to design attractive website menus. In this article, we will guide you in creating a mega menu.

Elementor Mega Menu - featured image

About the Elementor Mega Menu

Mega menus are expansive navigation menus that display all options simultaneously, eliminating the need for visitors to hover over dropdowns or search through the footer to find what they’re seeking.

Due to their practicality, mega menus are a commonly adopted feature on numerous successful websites, e-commerce platforms, etc.

However, WordPress does not natively support mega menus. So, unless your theme includes its own built-in mega menu functionality (often with limitations), you won’t be able to implement this beneficial design technique.

How to create a Mega Menu?

Note: In order to start using the Mega Menu widget, you need to activate the experiments: Flexbox Containers, Nested Elements, and Menu. You can find these experiments under Dashboard > Elementor > Settings > Features.

Once you activate them, the standard Nav Menu widget will be replaced by the WordPress Menu and Menu widgets.

Menu widgets in the Widget Panel
Menu widgets in the Widget Panel

Now you need to create a Header template. You can follow this guide on how to create a Header template. But keep in mind that in this case, we will continue building the Header using the Menu widget, i.e., creating the Mega Menu.

Linking the pages with the Menu Items

Once you create a Header template proceed dragging the Menu widget to the editor panel.

Dragging Menu widget
Dragging Menu widget

By default, you will have three items added to the Menu.

Menu items
Menu items

Now these items serve to connect the desired pages to these items. For example, you can add the link to the Home page, so that the menu item will lead to the Home page when clicked on.

Linking the page
Linking the page

After you link the page, when your users click on that item, it will lead them to that linked page. Of course, you can change the Title of the menu item so that your users know on which page they are clicking.

Menu item title
Menu item title

Activating the Dropdown Content

Now, activating the Dropdown Content is what Mega Menu is all about. It will allow you to add whatever you like to the menu itself.

Dropdown Content - ON
Dropdown Content – ON

This toggle is responsible for transforming the menu into a mega menu, enabling you to incorporate various types of content within your menu items. Typically, an arrow icon will be visible alongside the item by default.

Once you activate the Dropdown Content, that means that you can drag whatever you like into the container that is a part of the Mega Menu.

Activating Dropdown Content
Activating Dropdown Content

For example, you can add text and images to it. Basically, you can add whatever you like, but we recommend you add relevant content for the Menu and not overload your Mega menu with all kinds of widgets. That can confuse your users.

Adding content to the Mega Menu
Adding content to the Mega Menu

Styling of the Mega Menu

Mega menus offer an extensive array of styling choices, providing nearly all the formatting options that are accessible for crafting web pages to design your menus.

Styling Mega Menu

Whant to find out more?

Stefan Pavlović


Stefan Pavlović

I derive great satisfaction from crafting WordPress websites, be they informative platforms or e-commerce solutions. Additionally, I am passionate about authoring blog articles on BlueGrid.io Blog platform, where I disseminate my expertise regarding WordPress and its optimal utilisation.

Share this post

Share this link via

Or copy link