Submenu Element

Last Update: April 14, 2024

The Submenu Element is only available when editing Mega Menus through the Avada Library. It is used to add the submenus in the Mega Menu, and has very simlar options to the Menu Element. Read on to find out more about this useful Element, or watch the Menu Element video for a visual overview, as they share most features.

How To Use The Submenu Element

The Submenu Element allows you to place menus into your Mega Menu Layout (as they are in a Mega Menu, they are already submenus). It’s only available when editing Mega Menus from the Avada Library.

To start, create a Mega Menu from the Avada Library, and add the Submenu Element into your desired Column in your Mega Menu column structure.

There are four tabs in the Submenu Element. The first one, General, is where you select the Submenu 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 further submenus, and the Extras tab offers animation options that allow you to determine how the menu interacts with the loading of the page.

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

HeadingDescription
MenuSelect the menu which you want to use.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose 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.
DirectionChoose to have a horizontal or a vertical menu.
MarginSpacing above and below the section. Enter values including any valid CSS unit, ex: 4%.
Transition TimeSet the time for submenu expansion and all other hover transitions. In milliseconds.
Space Between Main Menu and SubmenuControls the space between the main menu and dropdowns.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Main

HeadingDescription
Minimum HeightThe minimum height for the main menu. Use any valid CSS unit.
Sticky Minimum HeightThe minimum height for main menu links when the container is sticky. Use any valid CSS unit.
Align ItemsSelect 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).
JustificationSelect how main menu items will be justified.
Main Menu TypographyControls the typography of the main menu item. Leave empty for the global font family.
Main Menu Item Text AlignSelect if main menu items should be aligned to the left, right or centered.
Main Menu Item PaddingSelect the padding for main menu items. Enter values including any valid CSS unit, ex: 10px or 10%.
Main Menu Item SpacingThe gap between main menu items. Use any valid CSS value, including its unit (10px, 4%, 1em etc).
Main Menu Item Border RadiusEnter values including any valid CSS unit, ex: 10px.
Main Menu Hover TransitionSelect the animation type when hovering the main menu items. This animation is applied to the background-color and borders.
Main Menu Icon PositionControls the main menu icon position.
Main Menu Icon SizeControls the size of the main menu icons.
Main Menu Item Styling
Main Menu Item Background ColorControls the background-color for main menu items.
Main Menu Item Text ColorControls the color for main menu item text color.
Main Menu Item Border SizeSelect the border size for main menu items. Enter values including any valid CSS unit, ex: 10px.
Main Menu Item Border ColorControls the border-color for main menu items.
Main Menu Item Icon ColorControls the main menu icon color.

Submenu

HeadingDescription
Dropdown CaretsSelect whether dropdown carets should show as submenu indicator.
Submenu ModeSelect whether you want a classic dropdown, or a stacked.
Expand MethodSelect how submenus will expand. If carets are enabled, then they will become clickable.
Click Method ModeSelect 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 IndentSet submenu indent. Enter values including any valid CSS unit, ex: 10px or 10%.
Submenu Expand DirectionChanges the expand direction for submenus and vertical menus.
Submenu Expand TransitionChanges the expand transition for submenus.
Submenu Maximum WidthThe maximum width for submenus. Use any valid CSS value.
Submenu TypographyControls the typography of the submenu items. Leave empty for the global font family.
Submenu Item Text AlignSelect how the submenu text should be aligned.
Submenu Item PaddingSelect the padding for submenu items. Enter values including any valid CSS unit, ex: 10px or 10%.
Submenu Border RadiusEnter values including any valid CSS unit, ex: 10px.
Box ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet 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 RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet 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 ColorControls the color of the box shadow.
Box Shadow StyleSet the style of the box shadow to either be an outer or inner shadow.
Submenu Thumbnail SizeControls the width and height of the submenu image thumbnails. Use "auto" for automatic resizing if you added either width or height.
Submenu Separator ColorControls the color for the submenu items separator. Set to transparent for no separator.
Submenu Item Styling
Submenu Background ColorControls the background-color for submenu dropdowns.
Submenu Text ColorControls the text color for submenu dropdowns.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article