“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 #
Select a way to open the menu items.
- Hover
- Click
Choose an icon for hamburger menu for responsive menu.
Choose an icon for close menu.
Specify the width in pixels, under this number the menu turn to mobile mode with the hamburger.
Menu Links Settings #
Align the items from given options.
- Start
- Center
- End
Set the gap between items.
Show or Hide the expand/collapse indicator.
Paste unicode from font awesome website for expanded or collapsed fonts.
Add hover effect for menu items.
- Underline
- Overline
- Double Line
- Framed
Menu Dropdown Settings #
Set the position of menu dropdown items.
- Item Left
- Item Right
- Item Center
Give the offset margin to mega menu.
Set the width of dropdown menu width.
- Full Width
- Custom Width
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 #
Turn on or off the overlay option.
Choose the overlay background color.
Set the opacity of background overlay.
Testing and Tools #
Options to choose a show or not the menu in editor
Show if have any errors
Show debug in items
Show debag in elements
Hide
Hide with message
Just Hide
Menu Items Settings #
Type a title for menu item.
Select the item type.
- Section
- Link
Type the section id of the section to display as menu item.
Turn on or off the clickable option.
Paste your link to show as menu item.
Set the dropdown width from given options.
- Default Width
- Full Width
- Custom Width
This will turn off the dropdown option for mobile device.
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.
