“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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Mega Menu“
- Hover over the widget in the search results and click install
- 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 #
Menu Item Open
Select a way to open the menu items.
- Hover
- Click
Hamburger Icon
Choose an icon for hamburger menu for responsive menu.
Close Menu Icon
Choose an icon for close menu.
Responsive Mode Breakout
Specify the width in pixels, under this number the menu turn to mobile mode with the hamburger.
Menu Links Settings #
Align Items
Align the items from given options.
- Start
- Center
- End
Items Gap
Set the gap between items.
Show Expand/Collapse Indicator
Show or Hide the expand/collapse indicator.
Expanded/Collapsed Font Awesome
Paste unicode from font awesome website for expanded or collapsed fonts.
Hover Effect
Add hover effect for menu items.
- Underline
- Overline
- Double Line
- Framed
Menu Dropdown Settings #
Position X
Set the position of menu dropdown items.
- Item Left
- Item Right
- Item Center
Offset X/Offset Y
Give the offset margin to mega menu.
Default Dropdown Width
Set the width of dropdown menu width.
- Full Width
- Custom Width
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 #
Show Overlay
Turn on or off the overlay option.
Overlay Background Color
Choose the overlay background color.
Overlay Background Opacity
Set the opacity of background overlay.
Testing and Tools #
Active Menu in Editor
Options to choose a show or not the menu in editor
Show Errors
Show if have any errors
Debug Item Ids
Show debug in items
Debug Items Elements Ids
Show debag in elements
Hide Sections in Editor
Hide
Hide with message
Just Hide
Menu Items Settings #
Title
Type a title for menu item.
Item Type
Select the item type.
- Section
- Link
Section ID
Type the section id of the section to display as menu item.
Clickable Link
Turn on or off the clickable option.
Link
Paste your link to show as menu item.
Dropdown Width
Set the dropdown width from given options.
- Default Width
- Full Width
- Custom Width
Disable Dropdown in Mobile
This will turn off the dropdown option for mobile device.
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.
