Add Mega Menu using the Huger for Elementor

The Mega Menu plugin allows you to use Elementor templates as a source, which means the menu can contain any type of content. In addition to the usual list with the item titles, you can get the necessary structure of menu elements with images, videos, interactive elements, search bar, or other required things. Add any widgets and shortcodes to the mega menu block. This is an easy way to get horizontal or vertical orientation in several clicks. Order the main menu items directly from the Elementor Editor.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content tab

In the Content section, you can manage the basic settings of the mega menu such as layout display, menu items, mobile display, submenu, icons, logo, etc.

General settings

  • Layout – select the menu display layout: horizontal or vertical.
  • Submenu indicator – select an icon to be added for menu items that have sub-items as an identifier. The available options: Chevron, Angle, Plus, Circle, Minus, Square, Custom(upload own SVG icon or choose one from the library).
  • Pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
  • Pointer animation – specify one of the available animations for the submenu items: Grow, Shrink, Slide up, Slide down, Fade, None. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.

Menu items

The block for managing the menu items. The items can be added, removed, or duplicated.

Main Menu Items

To add a new element, click “Add Item” and fill all the necessary fields:

  • Title – enter the title of the menu item
  • Link – paste the link for the current menu item
  • Submenu – select the submenu source: WP menu – regular WordPress menu that can be created via Appearance> Menus; Template – Elementor template that can be created via Templates> Add New/Import.

Mobile menu settings

  • Responsive breakpoint – specify a device or custom screen resolution for which the toggle mobile menu will be displayed. The available values: Mobile, Tablet, Custom.
  • Full width – the toggle to enable/disable the full-width display for the mobile menu.
  • Menu position – select a mobile menu position from the available options: Left, Right, Top.
  • Toggle icon – select the toggle icon from the library or upload your own SVG icon.
  • Close menu icon – select the close menu icon from the library or upload your own SVG. icon
  • Toggle align – specify the alignment for the toggle icons: Left, Center, Right.
  • Submenu click area – select a clickable area for submenu items.

Submenu

  • Expand menu position – specify the position where the submenu will be displayed. It can be Top(over the main menu) or Bottom(under the main menu).
  • Animation – specify one of the available animations for the submenu items: Grow, Shrink, Slide up, Slide down, Fade, None. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.

WP menu settings

A settings block for a submenu with a regular WordPress menu.

  • Layout – select the menu display layout: horizontal or vertical.
  • Pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
  • Submenu indicator – select an icon to be added for menu items that have sub-items as an identifier. The available options: Chevron, Angle, Plus, Circle, Minus, Square, Custom(upload own SVG icon or choose one from the library).
  • Expand submenu position – specify the position where the submenu will be displayed. It can be Top(over the main menu) or Bottom(under the main menu).
  • Submenu pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
  • Animation – specify one of the available animations for the submenu items: Grow, Shrink, Slide up, Slide down, Fade, None. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.

Style tab

On the style tab, you can manage the element styles of the responsive navigation like menu item colors in different states, size, typography, borders, padding/margin, etc.

Menu item/WP menu item/WP menu submenu item

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Indicator color – select the icon color of the menu indicator.
  • Indicator spacing – the setting allows managing the spacing of the current element in different units(px, %, em) for desktops, tablets, or phones.
  • Indicator click area – specify the click area in different units(px, %, em) for desktops, tablets, or phones.
  • Submenu indicator size – specify the icon size of the menu indicator for desktops, tablets, or phones.
  • Submenu indicator rotation – specify the rotation angle of the indicator for different devices.
  • Space between items – the setting allows managing the spacing between the menu items in different units: px, %. The option is available only for the Menu item section.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER/ACTIVE

The menu style settings for different states.

  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Submenu/WP menu submenu

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Offset – x – specify the x-offset of the submenu in various units: px, % for different devices.
  • Offset – y – specify the y-offset of the submenu in various units: px, %
  • for different devices.
  • Submenu width – specify the width of the submenu in different units(px, vh, vw) for desktops, tablets, or phones.
NORMAL/HOVER

The submenu style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Toggle style/Close toggle style

The display styles block of the responsive navigation for the mobiles.

Mobile menu toggle
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Toggle size – specify the size of the mobile toggle using a slider.
NORMAL/HOVER

The toggle style settings for different states.

  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Mobile menu

  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Was this article helpful to you?