Elementor Mega Menu Widget Tutorial

We’re happy to introduce one of the most powerful Mega Menu widgets for Elementor Page Builder that will help you bring rebranded menus to your website. Elementor Mega Menu will help you create new styles with outstanding, unique, and attractive menus.

Menus is one of the most important key elements in your website and having a complex but outstanding menu is a bit difficult without coding, but with our Mega Menu widget for Elementor, you will be able to create that menu you’re looking for simply.

Elementor Mega menu gives you the ability to include videos, carousels, products, posts, contact forms, etc to your menu with a unique UI UX.

---

Requirements:

• You will need the Premium Addons free plugin installed and activated on your website.
• Also, make sure that this widget is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

---

Key Features

• Menu Settings
• Display Options
• Expand/Slide Menu Settings
• Random Badges

Menu Settings

• Menu Type: The Mega Menu widget supports two ways to insert a menu. You can use a WordPress menu or you can create a new custom menu.
  • WordPress Menu: Select if you want to use an already built WordPress menu under Appearance > Menus.
  • Custom Menu: Select to create a new menu in the Elementor editor using a repeater.
• Menu: Select the WordPress menu that you want to insert. Here’s how to create a Mega Menu. (Available in WordPress Menu Type)

---

Menu Items

Build a custom menu in the Elementor editor, you can create menu and submenu items. Also, you can assign an Elementor template, icons, and badges for these items.

Please note that Custom Menu requires Premium Addons PRO installed and activated on your website.

• Item Type: Select Elementor menu or submenu.
• Content Type: Select Elementor Template if you want to add elements to your mega menu like videos, sliders, etc.
• Align to Widget Center: This option centers the mega content to the center of the widget container. (Available if the Content Type option is Elementor Template) Only works when the Full Width Dropdown option is disabled
• Element CSS Selector. (Available if the Content Type option is Element On Page)
• Text: Insert Elementor menu item text.
• Link: Assign link for Elementor menu item.
• Full Width Dropdown: Enable this option to set the dropdown width to the same width as the parent section
• Dropdown Minimum Width (PX): Set submenu container width in pixels (PX). (Available if the previous option is disabled)
• Icon Type: Select mega menu item icon type Icon, Image, or Lottie Animation. (Available if the icon option is enabled)
  • Select Icon: Select the mega menu item icon from WordPress Dashicons or Font Awesome Icons libraries. (Available with Icon Type Icon)
  • Upload Image: Upload an image or select one from the media library. (Available with Icon Type Image)
  • Lottie URL: Insert Lottie animation URL. You can get a JSON code URL from Lottiefiles.com. (Available with Icon Type Lottie Animation)
• Badge Text if the badge option is enabled: Type the badge text that will be shown beside the menu item. Very useful to Mark your Elementor menu item.

---

How to Create Mega Menu in Elementor?

The second option to create a menu is by navigating to WP Dashboard > Appearance > Menus and then saving your menu. Now, you can see the Premium Menu button that will help you to customize your menu items and create a mega menu for Elementor.

---

Clicking on the Premium Menu button will open the Premium Mega Menu Settings pop-up that will help you customize your menu items.

• Enable Mega Menu: Activate to enable Mega Menu for menu items.
• Create/Edit Mega Menu Content: Create/edit Elementor template. You can insert any Elementor elements inside it.
• Menu Content Position: Set mega menu container position as Default or Relative.
• Menu Content Width (PX): Set mega menu container width in pixels (PX).
• Icon Type: Select mega menu item icon type Icon or Lottie Animation.
  • Select Icon: Select the mega menu item icon from WordPress Dashicons or Font Awesome Icons libraries. (Available with Icon Type Icon)
  • Icon Color: Pick a color for the mega menu item color. (Available with Icon Type Icon)
  • Lottie URL: Insert Lottie animation URL. You can get a JSON code URL from Lottiefiles.com. (Available with Icon Type Lottie Animation)
• Item Badge Text: Type the badge text that will be shown beside the menu item.
• Badge Color: Pick a color for the badge text.
• Badge Background: Set a color for the badge background.

---

Display Options

• Hide Menu Until Content Loaded: This option hides the menu by default until the content inside it is loaded.

Menu Settings

• Layout: Set the menu layout Horizontal, Vertical, Expand, and Slide.
• Menu Alignment: Align your menu to left, center, right, or stretch in case the Layout is Horizontal.
• Item Hover Effect: Set on hover effect for a menu item. For instance: None, Underline, Overline, Double Line, Framed, Background, or Text.
• Animation: Set animation for the hovering effect for menu items.
• Enable Sticky Menu. (Available when the layout is horizontal)
• Sticky Target ID: The target ID to apply a sticky effect on ( without the “#” ).
• Sticky on Scroll Up.
• Disable On: Control which devices shouldn’t have a sticky menu.

For more information about creating an Elementor sticky menu, please take a look at this step by step article.

• Enable Collapsed Menu. (Available when the layout is vertical)
• Title.
• Open On: Open the menu on hover or click, or keep it always open.
• Opened By Default. (Available when the previous option is Click)
• Title Icon.
• Toggle Icon.
• Close Icon.
• Title Spacing: Use this option to control the spacing between the title’s icon and the title.

Submenu Settings

• Submenu Indicator Icon: Set a submenu icon from the Font Awesome library or none.
• Submenu Position: Set the position to Right or Left. (Available when the layout is vertical)
• Content Alignment: Align sub-menu content items text to left, center, or right.
• Open Submenu On: Open submenu on hover or click.
• Submenu Trigger: Choose between submenu item and submenu dropdown icon. (Available when the previous option is Click)
• Submenu Animation: Choose between slide directions.
• Badge Effects: Choose between badge effects options.
• Dot size. (Available when the badge effects are Grow)

Mobile Menu Settings

• Layout: Set the mobile menu layout to Expand or Slide.
• Breakpoint: Choose between mobile, tablet, or custom breakpoint.

Please note when selecting Menu Layout on Desktop as Expand or Slide that means that mobile will have the same menu layout.

---

Expand/Slide Menu Settings

Toggle Button

• Text: Set toggle text for the Expand/Slide menu.
• Close Text: Set close text for the Expand/Slide menu.
• Icon: Set toggle icon for the Expand/Slide menu.
• Close Icon: Set the close icon for the Expand/Slide menu.
• Toggle Button Position: Align the toggle Expand/Slide menu button to the left, center, or right.
• Menu Position: Set the menu position to left, center, or right. (Available in Expand menu only)
• Menu Alignment: Align menu text to left, center, or right.
• Toggle Menu Width: Set Elementor menu container width in pixels (PX), or viewport width (VW).
• Full Width: Enable to force set submenu in full width. (Available in Expand menu only)
• Hide Items Icon: Enable to hide menu items icons on tablet/mobile.
• Hide Items Badge: Enable to hide menu items badges on tablet/mobile.
• Close Menu After Click.
• Disable Page Scroll: Enable this option to disable page scroll when the slide menu is opened.

---

Random Badges

Please note that Random Badges requires Premium Addons PRO installed and activated on your website.

• Enable Random Badges: This option allows you to add badges that appear randomly on your menu items.
• Text: Set the badge text.
• CSS Selector: Set the CSS Class/ID of the elements you want to add the badges to.
• Max Number to Apply this Badge: Use this option to set the maximum number you want this badge to be applied.
• Text Color: Adjust the text color of the badge.
• Background Color: Adjust the background color of the badge.

---

Style

• Sticky Menu Style.
• Collapsed Menu Style.
• Desktop Menu Style.
• Menu Item Style.
• Menu Item Icon & Badge.
• Sub Menu Style.
• Sub Menu Item Style.
• Sub Menu Item Icon & Badge.
• Expand/Slide Menu Settings.

---

Sticky Menu Style

• Shadow: Add a shadow around the sticky menu section.
• Background Type: Pick the background for the sticky menu section.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for the sticky menu section.
• Padding: Set padding inside the sticky menu section.

---

Collapsed Menu Style

Title

• Typography: Adjust the collapsed menu title text font settings and style it.
• Icon Size: Set icon size for collapsed menu title.
• Color: Pick colors for the title on normal and hover states.
• Icon Color: Pick colors for the title icon on normal and hover states.

Toggle Icon

• Size: Set icon size for the collapsed menu toggle.
• Color: Pick colors for the toggle icon on both normal and hover states.

Container

• Background Type: Pick the background for the collapsed menu on both normal and hover states.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Box Shadow: Add a shadow around the Collapsed Menu on both normal and hover states.
• Border Type: Customize border settings for the collapsed menu.
• Border Radius: Add a radius for the border corner for the collapsed menu.
• Padding: Set padding inside the collapsed menu.

---

Desktop Menu Style

• Height: Set the menu bar height in pixel (PX), em (EM), and percentage %. (Available when the menu layout is horizontal)
• Width: Set the menu bar width in pixels (PX), and percentage (%). (Available when the menu layout is vertical)
• Box Shadow: Add a shadow around the menu by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Background Type: Pick the background for the menu.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Select from different border types, as well as the color and the width of the border on each side of the menu.
• Border Radius: Increasing the border radius will add circular corners to the menu. You can adjust the border radius in pixel (PX), percentage (%), or em (Em).
• Padding: Creates space between the menu bar and its text & icon in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile.

---

Menu Item Style

• Typography: Adjust the menu item text font settings and style it.
• Dropdown Icon Size: Set submenu icon dropdown icon size pixel (PX), or em (EM).
• Pointer Thickness: Set the pointer thickness value in pixels.
• Dropdown Icon Margin: Creates a space around the menu dropdown icon in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.
• Color: Pick a color for the menu item text on normal, hover, and active states.
• Dropdown Icon Color: Pick a color for the dropdown icon on normal, hover, and active states.
• Background Type: Pick the background for the menu item on normal, hover, and active states.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Text Shadow: Adjust the menu item shadow using the following controls on normal, hover, and active states:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Border Type: Select from different border types, as well as the color and the width of the border on each side of the menu item on normal, hover, and active states.
• Border Radius: Increasing the border radius will add circular corners to the menu item. You can adjust the border radius in pixel (PX), percentage (%), or em (Em) on normal, hover, and active states.
• Padding:  Creates space around the menu items text in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile at normal, hover, and active states.
• Margin: Creates a space around the menu items in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile at normal, hover, and active states.

---

Menu Item Icon & Badge

Icon Style

• Position: Set menu item icon position to the left or to the right on desktop, tablet, and mobile.
• Color: Pick a color for the menu items icons.
• Size: Set Icon menu item size on desktop, tablet, and mobile.
• Background Color: Pick a color for the menu item icon’s background.
• Border Radius: Increasing the border radius will add circular corners to the menu item icon. You can adjust the border radius in pixel (PX), percentage (%), or em (Em).
• Margin: Creates a space around the menu item icon in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.
• Padding:  Creates space around the menu items icon in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile.

---

Badge Style

• Typography: Adjust the menu badge text font settings and styling.
• Color: Pick a color for the menu item’s badges text.
• Background Color: Pick a color for the menu item badge background.
• Border Type: Select from different border types, as well as the color and the width of the border on each side of the menu item badge on normal, hover, and active states.
• Border Radius: Increasing the border radius will add circular corners to the menu item badge. You can adjust the border radius in pixel (PX), percentage (%), or em (Em) on normal, hover, and active states.
• Padding:  Creates space around the menu item badge in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile.
• Margin: Creates a space around the menu item badge in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.

---

Sub Menu Style

Customize both Simple and Mega Panels for the Elementor submenu.

• Box Shadow: Add a shadow around the sub-menu panel by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Background Type: Pick the background for the sub-menu panel.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Select from different border types, as well as the color and width of the border on each side of the sub-menu panel.
• Border Radius: Increasing the border radius will add circular corners to the sub-menu panel. You can adjust the border radius in pixel (PX), percentage (%), or em (Em).
• Padding: Creates space around sub-menu panel content in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile.
• Margin: Creates a space around the sub-menu panel in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.

---

Sub Menu Item Style

• Typography: Adjust the submenu item text font settings and styling.
• Color: Pick a color for the submenu item text on normal, hover, and active states.
• Background Type: Pick the background for the menu item on normal, hover, and active states.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Text Shadow: Adjust submenu item shadow using the following controls on normal, hover, and active states:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Border Type: Select from different border types, as well as the color and width of the border on each side of the submenu item.
• Border Radius: Increasing the border radius will add circular corners to the submenu item. You can adjust the border radius in pixel (PX), percentage (%), or em (Em).
• Padding: Creates space around the submenu items text in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile.
• Margin: Creates a space around the submenu items in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.

---

Sub Menu Item Icon & Badge

Icon Style

• Position: Set the submenu item icon position on the left or on the right on desktop, tablet, and mobile.
• Color: Pick a color for the submenu item icon color.
• Size: Set submenu icon item size on desktop, tablet, and mobile.
• Background Color: Pick a color submenu item icon background.
• Border Radius: Increasing the border radius will add circular corners to the submenu item icon. You can adjust the border radius in pixel (PX), percentage (%), or em (Em).
• Margin: Creates a space around the submenu item icon in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.
• Padding:  Creates space around submenu items icon in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile.

---

Badge Style

• Typography: Adjust submenu badge text font settings and styling.
• Color: Pick a color for the submenu item badge color.
• Background Color: Pick a color submenu item badge background.
• Horizontal Offset: Set space from the left or right for the submenu badge in pixel (PX), or percentage (%) on desktop, tablet, and mobile.
• Vertical Offset: Set space from the top or bottom for the submenu badge in pixel (PX), or percentage (%) on desktop, tablet, and mobile.
• Border Type: Select from different border types, as well as the color and width of the border on each side of the submenu item badge.
• Border Radius: Increasing the border radius will add circular corners to the submenu item badge. You can adjust the border radius in pixel (PX), percentage (%), or em (Em).
• Padding:  Creates space around the submenu item badge in pixel (PX), percentage (%), or em (Em) on desktop, tablet, and mobile.

Expand/Slide Menu Style

Toggle Button

Icon Style

• Size: Set toggle button icon size on desktop, tablet, and mobile.
• Color: Pick a color for the toggle button icon.
• Hover Color: Pick a color for the toggle button icon on the hover state.

Text Style

• Typography: Adjust the toggle button text font settings and styling.
• Color: Pick a color for the toggle button text.
• Hover Color: Pick a color for the toggle button text on the hover state.

• Background Color: Set the menu background color.
• Hover Background Color: Set the menu background color on the hover state.
• Box Shadow: Add a shadow around the menu element.
• Border Type: Select the border type you want your menu to have.
• Border Radius.
• Padding.
• Margin.

Toggle Menu

• Menu Item Color.
• Box Shadow.
• Background Type.
• Border Type.
• Border Radius.
• Padding.

---

Conclusion

If you’re looking for a powerful Mega Menu widget for Elementor page builder, you can use the Premium Mega Menu widget to build an outstanding & unique menu which gives you unlimited flexibility to achieve the menu that you’re looking for without any coding skills.

---

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.