Elementor Mega Menu Widget Tutorial

Do you look for a powerful Mega Menu widget for Elementor Page Builder that will help you to bring rebranded menus to your website? We’re happy to introduce one of our most powerful widgets called Mega Menu. Elementor Mega Menu will help you to create a new style, outstanding, unique and attractive menu.

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

Elementor Mega menu is very important for online store e-commerce, news, websites and any website that has a large site map. Because it will help you to include videos, carousel, products, posts, contact forms, etc to the website menu and make it easier for customers and have a unique UX.

Click here to check Elementor Mega Mega Widget demo page.

Elementor Mega Menu Widget
Elementor Mega Menu Widget

Requirements:

  • You will need 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.

Elementor Mega Menu Widget Settings

Start by dragging & drop Premium Mega Menu widget into your Elementor editor.

Key Features

  • Menu Settings.
  • Main Menu Settings.

Elementor Menu Settings

Elementor Mega Menu widget supports two ways to insert a menu. You can use an already built WordPress menu or you can create a new menu.

  • Menu Type: Select menu type WordPress Menu or 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 Elementor editor using a repeater.
  • Menu: Select WordPress menu that you want to insert, you can check the tutorial from here. (Available in WordPress Menu Type)
Red Arrow Pointing Menu Type Option in Elementor Mega Menu
Menu Type Option in Elementor Mega Menu

Menu Items

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

Please note that Custom Menu requires Premium Addons PRO installed and activated on your website.
  • Item Type: Select Elementor menu or sub menu.
  • Content Type: Select sub menu item type Link or Elementor Template. If you want to create a mega menu containing videos, sliders, etc you should use Elementor Template.
  • Text: Insert Elementor menu item text.
  • Link: Assign link for Elementor menu item.
  • Dropdown Minimum Width (PX): Set submenu container width in pixels (PX).
  • Icon Type: Select mega menu item icon type Icon, Image or Lottie Animation.
    • Select Icon: Select 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 JSON code URL from here. (Available with Icon Type Lottie Animation)
  • Badge Text: Type badge text that will be shown beside menu item. Very useful to Mark your Elementor menu item.
In Left Side Red Arrow Pointing to Menu Type Custom Menu and On Right Side Elementor Mega Menu Widget
Elementor Mega Menu Widget Custom Menu Option

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 Premium Menu button that will help you to customize your menu items and create mega menu for Elementor.

Red Arrow Pointing to Premium Menu in Appearance in WordPress Dashboard
Premium Button to Create Mega Menu for Elementor

Clicking on Premium Menu button will open Premium Mega Menu Settings pop up that will help you to 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 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 mega menu item icon from WordPress Dashicons or Font Awesome Icons libraries. (Available with Icon Type Icon)
    • Icon Color: Pick a color for mega menu item color. (Available with Icon Type Icon)
    • Lottie URL: Insert Lottie animation URL. You can get JSON code URL from here. (Available with Icon Type Lottie Animation)
  • Item Badge Text: Type badge text that will be shown beside menu item.
  • Badge Color: Pick a color for the badge text.
  • Badge Background: Set a color for the badge background.
Premium Mega Menu Settings Pop Up for Elementor Mega Menu
Premium Mega Menu Settings Pop Up for Elementor

Display Options

Here you can customize menu animation, alignment and much more options on desktop, tablet and mobile.

Menu Settings

  • Layout: Set menu layout Horizontal, Vertical, Expand and Slide.
  • Item Hover Effect: Set on hover effect for menu item. For instance: None, Underline, Overline, Double Line, Framed, Background or Text.
  • Animation: Set animation for hovering effect for menu items.

Submenu Settings

  • Submenu Indicator Icon: Set a submenu icon from Font Awesome library or none.
  • Content Alignment: Align sub-menu content items text to left, center or right.

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

Elementor Mega Menu Available Layouts Horizontal, Vertical, Expand and Slide
Elementor Mega Menu Available Layouts [Horizontal, Vertical, Expand and Slide]

Elementor Horizontal & Vertical Menus Settings

Horizontal & Vertical menus have some unique options, also you can create a sticky horizontal menu collapsed vertical menu.

Menu Settings
  • Menu Alignment: Align menu to left, center, right or stretch menu to take the full width of the section.
Submenu Settings
  • Submenu Position: Set submenu container position on left or on right. (Available only in Vertical Menu)
  • Submenu Animation: Select Elementor submenu entrance animation. Also, you can set menu transition duration and delay in seconds.
Mobile Menu Settings
  • Layout: Set menu layout for responsive (mobile or tablet) devices, you can select Dropdown or Slide. (For Horizontal and Vertical Layout Only)
  • Breakpoint: Set breakpoint to show mobile menu Tablet < 1025, Mobile < 768 or Custom.
    • Custom Breakpoint (px): Use this option to control when to turn your menu into a toggle menu, Default is 1025. (Available for Custom Breakpoint Only)
On Left Side Red Arrow Pointing to Horizontal Layout and On Right Side Elementor Mega Menu Horizontal Layout
Elementor Mega Menu Horizontal Layout
On Left Side Red Arrow Pointing to Vertical Layout Option and On Right Side Elementor Mega Menu Vertical Layout
Elementor Mega Menu Vertical Layout

How to Create a Sticky Menu in Elementor?

A Sticky Horizontal Elementor menu will stay at the top of the page while the user scrolls through it, making it quicker to browse between website pages.

First, you should assign CSS ID “pa-sticky” to Elementor Mega Menu parent section from Advanced tab.

Assigning CSS ID Elementor Mega Menu Parent Section
Elementor Mega Menu Parent Section ID

Second, you should enable sticky menu option and set Sticky Target ID to “pa-sticky”.

  • Enable Sticky Menu: Switch on to stick menu to top while users scrolls.
  • Sticky Target ID: Insert menu parent section CSS ID to make it apply a sticky effect on it. The target ID to apply sticky effect on ( without the “#” ).
  • Sticky on Scroll Up: Enable to only show sticky menu when scrolls up.
  • Disable On: Select on which devices you want to disable sticky menu.

How to Create a Collapsed Vertical Menu in Elementor?

A Collapsed Vertical Elementor menu is a vertical list menu that folds down to a single column of an expandable menu. You can archive that by Enabling Collapsed Menu under Vertical Menu layout.

  • Enable Collapsed Menu: Switch on to apply collapsed menu effect on Elementor menu.
  • Title: Set the title for trigger section to show the menu.
  • Open On: Set when menu items are displayed, you can trigger menu on hover, click or always.
  • Title Icon: Pick an icon to show beside title.
  • Toggle Icon: Pick an icon for trigger section when menu is closed.
  • Close Icon: Pick an icon for trigger section when menu is opened.
  • Title Spacing: Use this option to control the spacing between the title icon and the title.
On Left Side Red Arrow Pointing to Enable Collapsed Vertical Menu in Elementor Editor and On Right Side Vertical Collapsed Menu in Always Open States
Elementor Collapsed Menu in Elementor Mega Menu Widget

Expand/Slide Menu Settings

Customize Elementor Expand & Slide menu settings.

  • Text: Set toggle text for Expand/Slide Elementor menu.
  • Close Text: Set close text for Expand/Slide Elementor menu.
  • Icon: Set toggle icon for Expand/Slide Elementor menu.
  • Close Icon: Set close icon for Expand/Slide Elementor menu.
  • Toggle Button Position: Align toggle Expand/Slide Elementor menu button to left, center or right.
  • Menu Position: Set 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.
On Left Side Expand/Slide Menu Settings in Elementor Editor and On Right Side Expand Menu on Mobile
Expand Layout in Elementor Mega Menu Widget

Style

  • Sticky Menu Style.
  • Collapsed Menu Style.
  • Desktop Menu Style.
  • Toggle Menu Style.
  • Close Button 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 Elementor Sticky Menu section.
  • Background Type: Pick background for Elementor sticky menu section.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set background using gradient colors.
  • Border Type: Customize border settings for Elementor sticky menu section.
  • Padding: Set padding inside Elemntor sticky menu section.
Elementor Mega Menu Sticky Menu Style in Elementor Editor
Elementor Mega Menu Sticky Menu Style

Collapsed Menu Style

Title

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

Toggle Icon

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

Container

  • Background Type: Pick background for Elementor collapsed menu.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set background using gradient colors.
  • Box Shadow: Add a shadow around Elementor Collapsed Menu.
  • Border Type: Customize border settings for Elementor collapsed menu.
  • Border Radius: Add radius for border corner for Elementor collapsed menu.
  • Padding: Set padding inside Elemntor collapsed menu.
Elementor Mega Menu Collapsed Menu Style in Elementor Editor
Collapsed Mega Menu Style in Elementor Mega Menu Widget

Desktop Elementor Menu Style

  • Height: Set Elementor menu bar height in pixel (PX), em (EM) and viewport width (VW).
  • Box Shadow: Add a shadow around Elementor menu by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Background Type: Pick background for Elementor menu.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set 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 Elementor menu.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor menu. You can adjust the border-radius in pixel (PX), percentage (%) or em (Em).
  • Padding: Creates space between Elementor menu bar and its text & icon in pixel (PX), percentage (%) or em (Em) on desktop, tablet and mobile.
Red Arrow Pointing to Elementor Mega Menu Background Image
Setting Background Image for Elementor Mega Menu Widget Background

Toggle Menu Style for Elementor Page Builder

Style Elementor menu toggle & close buttons text and icon.

  • Size: Set toggle icon size in pixel (PX), percentage (%) or em (Em) on desktop, tablet and mobile.
  • Typography: Adjust Elementor menu button text font settings and style it. (Text Option Only)
  • Color: Pick a color for toggle icon/text.
  • Hover Color: Pick on hover color toggle icon/text.
  • Margin: Creates a space around Elementor menu toggle button text in pixel (PX), em (Em) and percentage (%) on tablet and mobile. (Text Option Only)
  • Background Color: Set background color for Elementor menu toggle button.
  • Hover Background Color: Pick on hover color for Elementor menu toggle button background.
  • Box Shadow: Add a shadow around Elementor menu toggle by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor mobile menu toggle button.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor menu toggle button. You can adjust the border-radius in pixel (PX), percentage (%) or em (Em).
  • Padding: Creates space inside Elementor menu toggle button in pixel (PX), percentage (%) or em (Em) on desktop, tablet and mobile.
  • Margin: Creates a space around the Elementor menu toggle button in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
Red Arrow Pointing to Toggle Button for Elementor Mega Menu
Elementor Mega Menu Toggle Button Style

Menu Style

  • Box Shadow: Add a shadow around Elementor menu by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Background Type: Pick background for Elementor menu.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set 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 Elementor menu container.
  • Padding: Creates space between Elementor menu container and its content in pixel (PX), percentage (%) or em (Em) on tablet and mobile.
Mega Menu Style for Elementor Page Builder
Mega Menu Style for Elementor Page Builder

Elementor Mega Menu Close Button Style

Customize close button icon & text size and colors for Slide layout. Same options as Toggle Button Style.

Close Button Style for Elementor Mega Menu in Elementor Editor
Close Button Style in Mega Menu Widget for Elementor Page Builder

Elementor Menu Item Style

  • Typography: Adjust Elementor menu item text font settings and style it.
  • Dropdown Icon Size: Set submenu icon dropdown icon size pixel (PX) or em (EM).
  • 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 Elementor menu item text on normal, hover and active states.
  • Dropdown Icon Color: Pick a color for dropdown icon on normal, hover and active states.
  • Background Type: Pick background for Elementor menu item on normal, hover and active states.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set background using gradient colors.
  • Text Shadow: Adjust 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 Elementor menu item on normal, hover and active states.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor 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 Elementor 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.
Red Arrow Pointing to Elementor Mega Menu Item Dropdown Icon
Elementor Mega Menu Item Style Dropdown Icon Styling

Elementor Menu Item Icon & Badge

Customize Elementor menu item icon and badge style.

Icon Style

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

Badge Style

  • Typography: Adjust Elementor menu badge text font settings and style it.
  • Color: Pick a color for Elementor Menu items badges text.
  • Background Color: Pick a color Elementor menu items badges background.
  • Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor menu item badge on normal, hover and active states.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor 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 Elementor 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.
Red Arrow Pointing to Elementor Mega Menu Item Badge
Menu Item Badge Style in Elementor Mega Menu Widget

Elementor Sub Menu Style

Customize simple and mega panels for Elementor submenu.

  • Minimum Width: Set minimum width for Elementor submenu simple panel container in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile. (For WordPress Menu Type Only)
  • Offset: Set offset for Elementor submenu mega panel container in pixel (PX) and percentage (%) on desktop, tablet and mobile.
  • Box Shadow: Add a shadow around Elementor sub-menu panel by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Background Type: Pick background for Elementor sub-menu panel.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set 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 Elementor sub-menu panel.
  • Border Radius: Increasing the border-radius will add circular corners to Elementor sub-menu panel. You can adjust the border-radius in pixel (PX), percentage (%) or em (Em).
  • Padding: Creates space around Elementor sub-menu panel content in pixel (PX), percentage (%) or em (Em) on desktop, tablet and mobile.
  • Margin: Creates a space around Elementor sub-menu panel in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
Red Arrow Pointing to Simple Panel Background Color for Elementor Mega Menu Widget
Sub Menu Style for Elementor Mega Menu Widget

Elementor Sub Menu Item Style

  • Typography: Adjust Elementor submenu item text font settings and style it.
  • Color: Pick a color for Elementor submenu item text on normal, hover and active states.
  • Dropdown Icon Color: Pick a color for dropdown icon on normal, hover and active states.
  • Background Type: Pick background for Elementor menu item on normal, hover and active states.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set 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 the width of the border on each side of Elementor submenu item.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor submenu item. You can adjust the border-radius in pixel (PX), percentage (%) or em (Em).
  • Padding:  Creates space around Elementor 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.
Red Arrow Pointing to on Hover Color for Sub Menu Item in Elementor Mega Menu
On Hover Color for Elementor Mega Menu Sub Menu Item

Elementor Sub Menu Item Icon & Badge

Customize Elementor sub menu item icon and badge style.

Icon Style

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

Badge Style

  • Typography: Adjust Elementor submenu badge text font settings and style it.
  • Color: Pick a color for sub menu item badge color.
  • Background Color: Pick a color Elementor submenu item badge background.
  • Horizontal Offset: Set space from the left or right for Elementor submenu badge in pixel (PX) or percentage (%) on desktop, tablet and mobile.
  • Vertical Offset: Set space from the top or bottom for Elementor 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 the width of the border on each side of Elementor submenu item badge.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor submenu item badge. You can adjust the border-radius in pixel (PX), percentage (%) or em (Em).
  • Padding:  Creates space around Elementor submenu item badge in pixel (PX), percentage (%) or em (Em) on desktop, tablet and mobile.
Submenu Item Badge Style for Elementor Mega Menu Widget
Submenu Item Badge Style in Elementor Mega Menu Widget

Conclusion

If you’re looking for a powerful Mega Menu widget for Elementor page builder, you can use Premium Mega Menu widget to build outstanding & unique menus which gives you all 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 Premium Addons support team from here. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.

This Post Has 4 Comments

  1. JCBBR

    Hello dear PA
    My configuration
    WP: 5.9.3
    Elementor free version: 3.6.2
    PA: 4.9.9 free version
    Mega menu widget
    Make main menu changes under ‘Appearance/menu’ with PA form
    Create new page with Elementor
    Add widget ‘Premium Nav Menu’
    Select the main menu
    I see the changes made to the menu
    Save the page
    And now what am I supposed to do to see these changes in my site menu
    Thanks

    1. Omar Elhawary

      Hi there,

      Thanks for contacting Leap13 support!

      You should see all changes applied to your menu. However, if you’ve any issues, please open a ticket on our support system so we can check the issue from our end.

      Regards

  2. Roman

    Hi! How to automatic close menu slider after link clicking?

    1. Omar Elhawary

      Hi Roman,

      I’ve addressed the issue for the dev team so they can check the issue from their end.

      Regards

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.