The Menu Element was added to Avada in Avada 7.0, and this fully featured Element can be used both throughout your content, and in the construction of Header Layouts using Avada Layouts. Read on to find out more about this exciting new Element, or watch the video for a visual overview.,Toggle NavigationHOMEAVADAABOUT USPARTNERSSPECIAL AVADA HOSTINGWORDPRESS HOSTINGWORDPRESS CUSTOMIZATIONBLOGCONTACTSUPPORTGETTING STARTEDDOCUMENTATIONTUTORIAL VIDEOSSUBMIT A TICKETSYSTEM STATUSCOMMUNITY FORUMMY ACCOUNTSALE,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Menu ElementThe Menu Element allows you to place a menu anywhere on your site, including in a Header Layout in Avada Layouts.
Step 1. Create a new page, post, or Header Layout Section, or edit an existing one.
Step 2. Select the container and column you would like to place the menu into.
Step 3. Click on Add Menu, and select, or search for, the Menu Element.
Step 4. 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.
Step 5. Save the Element as per the method in the interface of the Fusion Builder you are working in.
Read How The Menu Element & Menu Work Together !767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab
Menu – Select the menu which you want to use. You must first create these in Appearances > Menu, from the WordPress Dashboard.
Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). 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 – Select if you want a horizontal or a vertical menu.
Margin – Spacing above and below the section. Enter values including any valid CSS unit, ex: 4%.
Transition Time – The time it takes for submenus to expand and all other transitions on hover. 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. Choose from Main, Main Active, and Submenus. You can select multiple options.
Arrow Size – Controls the width and height of the arrows. In px.
CSS Class – Add a class to the wrapping HTML element.
CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenMain Tab
Minimum Height – The minimum height for the main menu. Use any valid CSS unit.
Sticky Minimum Height – The minimum height for main menu links. This is a dependent option that shows when the parent container is sticky. Use any valid CSS unit.
Align Items – Select how main menu navigation-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). Choose from Start, Center, End, and Stretch.
Justification – Select how main menu navigation-items will be justified. choose from Start, Center, End, Between, Space Around, or Space Evenly.
Main Menu Typography
Font Family – Controls the font family of the menu items. Leave empty to use the site default.
Font Size – The font size for main menu links. Use any valid CSS unit.
Letter Spacing – Controls the letter spacing of the main menu items. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.
Main Menu Item Text Align – Select if main menu items should be aligned to the left, right or centered. (Centered works well with Vertical Menus). Choose from Flex Start, Center, Flex End, or Space Between.
Main Menu Item Padding – Select the padding for navigation 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. Choose from Bottom, Center Horizontal, Center Grow, Center Vertical, Fade, Left, Right, or Top.
Main Menu Icon Position – Controls the main menu icon position. Choose from Top, Right, Bottom, or Left.
Main Menu Icon Size – Controls the size of the main menu icons.
Mega Menu Thumbnail Size – Controls the width and height of the main menu mega-menu thumbnails. Use 「auto」 for automatic resizing if you added either width or height.
Mega Menu Title Justification – Select how mega menu titles will be justified.
Main Menu Item Styling – Use filters to see specific type of content.
Regular Options
Main Menu Item Background Color – Controls the background color for navigation links.
Main Menu Item Link Color – Controls the color for main menu navigation links.
Main Menu Item Border-Size – Select the top, bottom, left & right border-widths for navigation items. Enter values including any valid CSS unit, ex: 10px.
Main Menu Item Border Color – Controls the border-color for non-hover & non-active navigation links.
Main Menu Item Icon Color – Controls the color of the icon.
Hover/Active Options
Main Menu Item Hover Background Color – Controls the background color for menu item hover and active states.
Main Menu Item Hover Color – Controls the color for active items on navigation links.
Main Menu Item Hover Border-Size – Select the top, bottom, left & right border-widths for active/hover navigation items. Enter values including any valid CSS unit, ex: 10px.
Main Menu Item Hover Border Color – Controls the border-color for hover & active navigation links.
Main Menu Item Icon Hover Color – Controls the icon』s hover color.
View The Options ScreenSubmenu Tab
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. Choose from Dropdown, or Flyout.
Expand Method – Select how submenus will expand. Choose from Hover, or Icon Click.
Submenu Expand Direction – Changes the expand direction for submenus and vertical menus. Choose from Left, or Right.
Submenu Expand Transition – Changes the expand transition for submenus. Choose from Fade, or Slide Up.
Submenu Maximum Width – The maximum width for submenus. Use any valid CSS value.
Flyout Direction – Controls the direction the flyout sub menu starts from. Choose from Fade, Left, Right, Bottom, or Top.
Submenu Typography
Font Size – The font-size for submenu links. Use any valid CSS unit.
Font Family – Controls the font family of the menu items. Leave empty to use the site default.
Text Transform – Choose how the text is displayed. Choose from Normal, or Uppercase.
Submenu Item Padding – Select the padding for navigation 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 Separator Color – Controls the color for the sub menu items separator. Set to transparent for no separator.
Submenu Item Styling – Use filters to see specific type of content.Regular
Submenu Background Color – Controls the background-color for active on navigation links.
Submenu Text Color – Controls the text color for submenu dropdowns.
Hover/Active
Submenu Hover/Active Background Color – Controls the background-color for hover/active sub menu items.
Submenu Hover/Active Text Color – Controls the text color for submenu items hover / active states.
View The Options ScreenMobile Tab
Collapse To Mobile Breakpoint – The breakpoint at which your navigation will collapse to mobile mode. Choose from Never, Small Screen, Medium Screen, Large Screen, or Custom.
Collapse To Mobile Breakpoint – The breakpoint at which your navigation will collapse to mobile mode, when selecting Custom in the option above. In pixels.
Mobile Menu Mode – Choose if you want the mobile navigation to be collapsed to a button, or always expanded.
Mobile Menu Expand Mode – Change the width and position of expanded mobile menus. Choose from Within Column – Normal, Within Column – Static or Full Width – Static.
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 trigger navigation icon.
Mobile Menu Trigger Expand Icon – Select icon for expanding/opening the navigation.
Mobile Menu Trigger Collapse Icon – Select icon for collapsing/closing the navigation.
Mobile Menu Trigger Font Size – Controls the size of the mobile menu trigger. 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 Navigation Indent Submenus – Turn on to enable indentation for sub-menus.
Mobile Menu Typography
Font Family – Controls the font family for mobile menu.
Font Size – Controls the font size for mobile menu.
Mobile Menu Separator Color – Controls the color for mobile menu separators.
Mobile Menu Item Styling – Use filters to see specific type of content.Regular
Mobile Menu Background Color – Controls the background color for mobile menus.
Mobile Menu Text Color – Controls the text color for mobile menus.
Active
Mobile Menu Active Item Background Color – Controls the background color for mobile menu active & focused items.
Mobile Menu Active Item Text Color – Controls the text color for mobile menu active & focused items.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsThere are no Global options for the Menu Element.