fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

Mega Menu

Mega Menu Widget” helps you to create a unique Mega Menu on your website by adding images, icons, links, or any other Elementor widget to your menu. You can easily create any sort of Mega Menu layout directly inside of the Elementor page builder. You can use sections as menu items and design with no limits. Let’s look at each of the options in the “Mega Menu Widget” below.

Install Mega Menu Widget for Elementor #

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Mega Menu
  3. Hover over the widget in the search results and click install
  4. Add your “Mega Menu” widget to any Elementor Page

How it works? #

To set up the Mega Menu is very simple- each item in the Mega Menu can be connected to Elementor section by ID or it can be a regular link. The sections can come from the current page or from an external Elementor template. Step-by-step tutorial below.

Option 1: Add sections to the Mega Menu #

Go to Mega Menu Settings>>>Go to menu items settings>>>Select item type as Section>>>In Section ID option, add name for section.

After this you need to go to the advanced settings of a section that you created  >> give the section a CSS ID. You can create as many sections as you need for you Mega Menu.

Option 2: Use Template in Mega Menu Sections #

Go to Templates in the WordPress side menu >> Add new >> Select the template type as page and give your Template a name. Add all the sections to your template and give each section an ID.

Go to >> Template in “Mega Menu” Settings :

Choose any template for menu sections

General Settings #

1
Menu Item Open

Select a way to open the menu items.

  • Hover
  • Click
2
Hamburger Icon

Choose an icon for hamburger menu for responsive menu.

3
Close Menu Icon

Choose an icon for close menu.

4
Responsive Mode Breakout

Specify the width in pixels, under this number the menu turn to mobile mode with the hamburger.

Menu Links Settings #

1
Align Items

Align the items from given options.

  • Start
  • Center
  • End
2
Items Gap

Set the gap between items.

3
Show Expand/Collapse Indicator

Show or Hide the expand/collapse indicator.

4
Expanded/Collapsed Font Awesome

Paste unicode from font awesome website for expanded or collapsed fonts.

5
Hover Effect

Add hover effect for menu items.

  • Underline
  • Overline
  • Double Line
  • Framed

Menu Dropdown Settings #

1
Position X

Set the position of menu dropdown items.

  • Item Left
  • Item Right
  • Item Center
2
Offset X/Offset Y

Give the offset margin to mega menu.

3
Default Dropdown Width

Set the width of dropdown menu width.

  • Full Width
  • Custom Width
4
Open Transition

Select an open transition effect for dropdown menu items.

  • No Transition
  • Slide From Left
  • Slide From Top
  • Slide From Right
  • Slide From Bottom
  • Fade In
  • Fade In Left
  • Fade In Top
  • Fade In Right
  • Fade In Bottom

Overlay Settings #

1
Show Overlay

Turn on or off the overlay option.

2
Overlay Background Color

Choose the overlay background color.

3
Overlay Background Opacity

Set the opacity of background overlay.

Testing and Tools #

1
Active Menu in Editor

Options to choose a show or not the menu in editor

2
Show Errors

Show if have any errors

3
Debug Item Ids

Show debug in items

4
Debug Items Elements Ids

Show debag in elements

5
Hide Sections in Editor

Hide

Hide with message

Just Hide

Menu Items Settings #

1
Title

Type a title for menu item.

2
Item Type

Select the item type.

  • Section 
  • Link
3
Section ID

Type the section id of the section to display as menu item.

4
Clickable Link

Turn on or off the clickable option.

5
Link

Paste your link to show as menu item.

6
Dropdown Width

Set the dropdown width from given options.

  • Default Width
  • Full Width
  • Custom Width
7
Disable Dropdown in Mobile

This will turn off the dropdown option for mobile device.

8
Visible In

Set the responsiveness of dropdown menu items.

  • Desktop+Mobile
  • Desktop Only
  • Mobile Only

Mega Menu Widget Styling #

Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want

Menu Items Styling #

Set the typography, border, color and background color of menu items in normal and active mode.

Dropdown Styling #

Style the border, shadow, background color, radius and padding of dropdown.

Hamburger Icon Styling #

You can set the hamburger alignment, icon size, color, background and border.

Close Icon Styling #

In this section, set the alignment, icon size, background, radius, and border of close icon.

Menu Styling #

Style the menu background, padding, border, and border radius.

Our extra Widget "Mega Menu Inner Links" #

Also you can choose to use our ultimate widget “Mega Menu Inner Links” that can help you to add Inner links into your Mega Menu

Responsive Mode #

Full responsive options that work well for mobile, tablet, and desktop devices.

Usage Examples #

Here are some live use cases for the Mega Menu Widget.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!