Menu Element
Last Update: August 26, 2026
The fully featured Menu Element is a standard Design Element that can be used both throughout your content and in the construction of Header Layout Sections using Avada Layouts.
Watch the video below for a visual overview of the Element, view the Avada Menu Element page for examples, and read on to see the complete list of options.
For privacy reasons YouTube needs your permission to be loaded.
How To Use The Menu Element
The Menu Element is primarily designed to be used in a Header Layout Section in Avada Layouts. See the Avada Layouts documentation for more information on Layouts, but basically, a Header Layout Section is a template you create that is then used for the header section of your website.
You then place the Menu Element into the Header Layout Section wherever you want, and configure it, connecting it to a WordPress Menu that you have already created. It’s essential to realise the Menu Element only displays an existing menu that you make in the usual way through WordPress > Appearance > Menus.
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 related to functionality and alignment. The Main tab is where you configure your selected menu’s appearance and colors. The Submenu tab has its 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.
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. | |
| Experiment Events | Select any available Avada Experiment events to this element. Note: if you are already using the selector to trigger this, no need to add here. | |
| 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. | |
| ARIA Label Attribute | Set an aria-label attribute for the menu. If left empty, the menu name as set in the menu options will be used. | |
| 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. | |
| Sticky Main Menu Font Size | Controls the font size of the main menu items when the container is sticky. Use any valid CSS unit. Leave empty to inherit the standard font size. | |
| 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). | |
| Sticky Main Menu Item Spacing | The gap between main menu items when the container is sticky. Use any valid CSS value, including its unit (10px, 4%, 1em etc). Leave empty to inherit the standard spacing. | |
| 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. | |
| Sticky Main Menu Icon Size | Controls the size of the main menu icons when the container is sticky. Leave empty to inherit the standard icon size. | |
| 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. | |
| Sticky Main Menu Item Text Color | Controls the main menu item text color when the container is sticky. Leave empty to inherit the standard 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. | |
| Sticky Main Menu Item Icon Color | Controls the main menu icon color when the container is sticky. Leave empty to inherit the standard 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 allows several items to be open at a time. Accordion only allows 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. | |
| Use Search As Icon On Mobile | Turn on to render a Search special menu item as a standalone icon next to the mobile menu trigger instead of folding it into the mobile menu. Clicking the icon toggles a slide-down search form. The icon is taken from the menu item's "Icon Select" option. | |
| Use Cart As Icon On Mobile | Turn on to render the WooCommerce Cart special menu item as a standalone icon next to the mobile menu trigger instead of folding it into the mobile menu. The icon is taken from the menu item's "Icon Select" option. | |
| Use Off Canvas Trigger As Icon On Mobile | Turn on to render an Off Canvas Trigger special menu item as a standalone icon next to the mobile menu trigger instead of folding it into the mobile menu. The icon is taken from the menu item's "Icon Select" option and the linked Off Canvas is the one selected on that menu item. | |
| Use Wishlist As Icon On Mobile | Turn on to render the Wishlist special menu item as a standalone icon next to the mobile menu trigger instead of folding it into the mobile menu. The icon is taken from the menu item's "Icon Select" option. | |
| Use Product Compare As Icon On Mobile | Turn on to render the Product Compare special menu item as a standalone icon next to the mobile menu trigger instead of folding it into the mobile menu. The icon is taken from the menu item's "Icon Select" option. | |
| Mobile Menu Trigger Position | Controls whether the mobile menu trigger button appears before or after the standalone icons (Search / Cart / Off Canvas / Wishlist / Product Compare). Only relevant when at least one keep-as-icon option is enabled. | |
| 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 | |
|---|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. | |
| 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. | |
| Dynamic Display | Show or hide this element dynamically based on real-time cart and wishlist state. Changes apply immediately without a page reload. NOTE: Server cache can interfere with initial visibility. |
