Mega Menu

How to Configure and Style Mega Menu in Elementor #

The Elementor Mega Menu Widget provided by Spexo Addons is one of the easiest addons for both beginners and web design masters in order to create mega menus for websites. As the plugin is meant for Elementor, we will show you how to use the mega menu widget inside the Elementor editor page including the customizations.

Please read the whole content to learn about the precise controls to use the mega menu widget yourself.

Basic preparations #

First, navigate to the Spexo Addons -> Widget Settings tab. Here, you can type Mega Menu inside the search bar on your right and find the widget. Then turn on the widget’s switcher.

How to Create a Mega Menu #

Before using the Mega Menu widget to display mega menus inside your webpage, you need to first create a mega menu of your choice from the WordPress dashboard. Let’s take a look at the procedure of creating a mega menu within 5 minutes.

Create a menu #

First of all, make sure that you had already created a Menu to use it on Mega Menu. To create a menu, simply go to your WordPress Dashboard. Then navigate to wp-admin -> Appearance -> Menus.

You can simply use its drag & drop facility to create a Menu & save it.

Mega menu creation #

If you hover over the menus, you will see a floating option named mega menu appear beside the menu items. Now, click on the floating button.

Clicking the floating button will open a popup window that contains the basic settings for the mega menu.

Customize Mega menu settings #

Here, you need to turn on the Enable Mega Menu switcher first, and then select a dropdown position and width for the menu. Once done, click the SAVE button once.

After finishing the mega menu setting, you should click the Edit with Elementor for further menu customization.

Customize inner menu content #

When you click the “Edit with Elementor” button, a blank popup window will open. This window is powered by Elementor and takes up your full browser screen.

You can customize the inner content of your mega menu in two ways:

Method 1: Use Prebuilt Mega Menu #

In the Elementor editor, click the Spexo Addons Library icon.

Go to Sections → Mega Menu.

Hover over a section to see the Insert button, then click it to add the design to your mega menu.

Customize the content, colors, or layout as needed.

Method 2: Create Your Own Design #

To start designing your mega menu, pick any element from the Elementor Side Panel and drop it inside the editor interface.

You can either:

• Use the search bar to quickly find the widget you need, or
• Scroll through the Elements panel to browse available widgets.

Simply drag widgets into the “Drag widget here” area or click the “+” icon to add a new section.

Use any combination of elements—like Headings, Images, Icons, Buttons, Columns, or Inner Sections—to build the structure and content of your mega menu as per your layout preference.

Once your design is complete, review your layout, spacing, and responsiveness across devices.

To finish, click the “X” icon at the top-right corner of the editor window to close it.

With that, you will return to the menu page with the basic mega menu popup window still open. Now, click on the SAVE button again to save everything you have done till now.

How to Activate Mega Menu #

To use this Spexo Addons element, find the ‘Mega Menu‘ element from the Search option under the ‘ELEMENTS‘ tab.

Simply just Drag & Drop the ‘Mega Menu’ into the ‘Drag widget here‘ or the ‘+’ section.

After you are successfully done with this step, this is how the element is going to look like.

How to Configure the Content Settings #

Under the ‘Content’ tab, you will find the ‘Menu’ section.

Menu #

From this section, you can choose a ‘Menu’ out of which you have created on your website. Besides, you can use the drop-down menu to choose your preferred Layout as well. By default, it is set to ‘Horizontal’ layout. Also you can align menu with supported all devices.

Menu Items #

From this section, you can choose a hover effect, hover animation and transition duration. Besides, you can use the drop-down menu to choose your preferred sub menu icon, sub menu display action and sub menu entrance well.

Mobile Menu #

From this section, you can use the drop-down menu to choose when open mobile menu. You can also change display type and mobile menu width as well.

Besides, you can change the toggle button icon, use the drop-down menu to choose your preferred toggle icon and alignment with responsive option.

Click to see Live Demo #

How to Style Mega Menu #

Switch to the ‘Style’ tab to style all the features of Mega Menu.

Menu Items #

From the ‘Menu Items’ section, you can change the text color with hovered and normal options, in hovered option you can also set pointer color. You can use toggle for highlight active item, also change sub menu icon size, pointer height, typography, pointer height and many more.

Besides, you can change the inner and outer horizontal spacing, vertical spacing and sub menu offset supported in all devices. Moreover, you can add styling to the Border as well.

Others #

You can also add styling to ‘Menu Item Badge’, ‘Sub Mega Menu’, ‘WordPress Sub Menu’, ‘Toggle Button’ &  ‘Mobile Menu Items’ by changing the color, spacing & many more as per your preference.

Final Outcome #

By following the basic steps and a bit more modifying, you can style your Mega Menu as per your preference.

This is how you can easily display amazing mega menu on any place of your website using Mega Menu.

If you face any difficulties, feel free to contact our support team for further assistance.