Menu Element

Last Update: April 14, 2024

The fully featured Menu Element can be used both throughout your content, and in the construction of Header Layout Sections using Avada Layouts. Read on to find out more about this exciting Element, and watch the video below for a comprehensive walkthrough.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Menu Element

The Menu Element allows you to place a menu anywhere on your site, including in a Header Layout in Avada Layouts.

To start, choose where you want to add your menu and add the element into your desired column.

There are five tabs in the Menu Element. The first one, General, is where you select the Menu to display and make some basic configuration settings to do with functionality and alignment. The Main tab is where you configure your selected menu’s appearance and colors. The Submenu tab has its own configuration options for any submenus. The Mobile tab is where you configure your menu for mobile, and the Extras tab offers animation options that allow you to determine how the menu interacts with the loading of the page.

Read on below for full details of all the Menu element options.

Read How The Menu Element & Menu Work Together !

Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Menu		Select the menu which you want to use.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky Visibility		Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
Direction		Choose to have a horizontal or a vertical menu.
Margin		Spacing above and below the section. Enter values including any valid CSS unit, ex: 4%.
Transition Time		Set the time for submenu expansion and all other hover transitions. In milliseconds.
Space Between Main Menu and Submenu		Controls the space between the main menu and dropdowns.
Menu Arrows		Choose if you want to show dropdown arrows on the main menu and submenus.
Arrow Size		Controls the width and height of the arrows.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Main

Heading		Description
Minimum Height		The minimum height for the main menu. Use any valid CSS unit.
Sticky Minimum Height		The minimum height for main menu links when the container is sticky. Use any valid CSS unit.
Align Items		Select how main menu items will be aligned. Defines the default behavior for how flex items are laid out along the cross axis on the current line (perpendicular to the main-axis).
Justification		Select how main menu items will be justified.
Main Menu Typography		Controls the typography of the main menu item. Leave empty for the global font family.
Main Menu Item Text Align		Select if main menu items should be aligned to the left, right or centered.
Main Menu Item Padding		Select the padding for main menu items. Enter values including any valid CSS unit, ex: 10px or 10%.
Main Menu Item Spacing		The gap between main menu items. Use any valid CSS value, including its unit (10px, 4%, 1em etc).
Main Menu Item Border Radius		Enter values including any valid CSS unit, ex: 10px.
Main Menu Hover Transition		Select the animation type when hovering the main menu items. This animation is applied to the background-color and borders.
Main Menu Icon Position		Controls the main menu icon position.
Main Menu Icon Size		Controls the size of the main menu icons.
Main Menu Item Background Color		Controls the background-color for main menu items.
Main Menu Item Text Color		Controls the color for main menu item text color.
Main Menu Item Border Size		Select the border size for main menu items. Enter values including any valid CSS unit, ex: 10px.
Main Menu Item Border Color		Controls the border-color for main menu items.
Main Menu Item Icon Color		Controls the main menu icon color.

Submenu

Heading		Description
Dropdown Carets		Select whether dropdown carets should show as submenu indicator.
Submenu Mode		Select whether you want a classic dropdown, or a full-screen flyout.
Expand Method		Select how submenus will expand. If carets are enabled, then they will become clickable.
Close On Outer Click		Select if submenu should be closed on click outside the section.
Click Method Mode		Select how the submenus should open. Toggle allows several items to be open at a time. Accordion only allows one item to be open at a time.
Submenu Indent		Set submenu indent. Enter values including any valid CSS unit, ex: 10px or 10%.
Submenu Expand Direction		Changes the expand direction for submenus and vertical menus.
Submenu Expand Transition		Changes the expand transition for submenus.
Submenu Maximum Width		The maximum width for submenus. Use any valid CSS value.
Flyout Direction		Controls the direction the flyout submenu starts from.
Submenu Typography		Controls the typography of the submenu items. Leave empty for the global font family.
Submenu Item Text Align		Select how the submenu text should be aligned.
Submenu Item Padding		Select the padding for submenu items. Enter values including any valid CSS unit, ex: 10px or 10%.
Submenu Border Radius		Enter values including any valid CSS unit, ex: 10px.
Box Shadow		Set to "Yes" to enable box shadows.
Box Shadow Position		Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur Radius		Set the blur radius of the box shadow. In pixels.
Box Shadow Spread Radius		Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow Color		Controls the color of the box shadow.
Box Shadow Style		Set the style of the box shadow to either be an outer or inner shadow.
Submenu Thumbnail Size		Controls the width and height of the submenu image thumbnails. Use "auto" for automatic resizing if you added either width or height.
Legacy Mega Menu Title Justification		Select how legacy mega menu titles will be justified.
Submenu Separator Color		Controls the color for the submenu items separator. Set to transparent for no separator.
Submenu Background Color		Controls the background-color for submenu dropdowns.
Submenu Text Color		Controls the text color for submenu dropdowns.
Close Icon Color		Controls the close icon color for flyout submenu.

Mobile

Heading		Description
Collapse to Mobile Breakpoint		The breakpoint at which your navigation will collapse to mobile mode.
Mobile Menu Mode		Choose if you want the mobile menu to be collapsed to a button, or always expanded.
Mobile Menu Expand Mode		Change the width and position of expanded mobile menus.
Mobile Menu Opening Mode		Select how the submenus should open. Toggle allow several items to be open at a time. Accordion only allow one item to be open at a time.
Mobile Menu Trigger Padding		Select the padding for your mobile menu's expand / collapse button. Enter values including any valid CSS unit, ex: 10px.
Mobile Menu Trigger Background Color		Controls the background-color for the mobile menu trigger.
Mobile Menu Trigger Text Color		Controls the text-color for the mobile menu trigger.
Mobile Menu Trigger Text		The text shown next to the mobile menu trigger icon.
Mobile Menu Trigger Expand Icon		Select icon for expanding / opening the menu.
Mobile Menu Trigger Collapse Icon		Select icon for collapsing / closing the menu.
Mobile Menu Trigger Font Size		Controls the size of the mobile menu trigger. Font-Size In pixels.
Mobile Menu Trigger Horizontal Align		Change the horizontal alignment of the collapse / expand button within its container column.
Mobile Menu Trigger Button Full Width		Turn on to make the mobile menu trigger button span full-width.
Mobile Menu Trigger Bottom Margin		Controls the space between the mobile menu trigger and expanded mobile menu.
Mobile Menu Item Minimum Height		Controls the height of each menu item. In pixels.
Mobile Menu Sticky Maximum Height		The maximum height for mobile main menu links when the container is sticky. Use any valid CSS unit.
Mobile Menu Text Align		Select if mobile menu items should be aligned to the left, right or centered.
Mobile Menu Indent Submenus		Turn on to enable identation for submenus.
Mobile Menu Typography		Controls the typography of the mobile menu. Leave empty for the global font family.
Mobile Menu Separator Color		Controls the color for mobile menu separators.
Mobile Menu Background Color		Controls the background color for mobile menus.
Mobile Menu Text Color		Controls the text color for mobile menus.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

How To Use The Menu Element
Element Options