Avada 文件

Menu Settings

To make the most of your menus in WordPress when using Avada, you should be familiar with the various settings and options available when initially creating your menus, at Appearance > Menus, from the WordPress dashboard. These are a mixture of WordPress core menu functions, and third-party and Avada added settings. For an introduction to the core WordPress functionality of Menus, please see the WordPress.org Appearance > Menus Screen documentation.
There are many types of menu items that can be added to a menu. Some of these are core WordPress options, such as Pages, Posts, Custom Links & Categories. Others are added with third-party plugins, such as WooCommerce or The Events Calendar. Yet others are added by Avada, such as the Avada Special Menu Items and the Avada Menu Options.
There are also multiple levels of possible menu items; the Parent Level (or the First Level menu items) and any Child Levels (or sub-level menu items below the Parent Level menu item). There can be up to 4 child levels with Avada.
In each Menu item, you will also find the Avada Menu Options button. See the linked doc for a full rundown, but basically, you can use these options to configure your menu item』s appearance in your menu.
There are also five menu positions available with Avada – Main Navigation, Top Navigation, Mobile Navigation, 404 Useful Pages, and Sticky Header Navigation. See the Setting Up A Menu doc for more details on this, and other menu related items.
To read more about Mega Menus, please see our Using The Mega Menu document. Read below for more information on Menu Settings in Avada.
IMPORTANT NOTE: This post refers to the options located in the Appearance > Menus section of the WordPress admin. There are also additional Avada menu options in the Avada Theme Options panel.Parent Level Menu SettingsNavigation Label – Illustrated as A. Allows you to add a name to your menu item. In this way, you can change the display name of a menu item.
Title Attribute – Illustrated as B. This will specifies the value for the title attribute of the menu item. This text will only be displayed when a user』s mouse hovers over the menu item.
Link Target – Illustrated as C. Allows you to set the link target to _blank.
Description – Illustrated as D. You can add a description under the Menu item. See the Spa Demo Menu for an example of this.
Avada Options – Illustrated as E. This will open additional menu item settings which are proprietary to Avada. Click the button and you』ll gain access to the additional options listed below, in the next section.
Move – Illustrated as F. Allows you to easily move the menu item to various positions in the Menu Structure.
Original – Illustrated as G. Allows you to view the original page name, which the menu item links to.
Remove – Illustrated as H. Allows you to remove the menu item from the Menu Structure.
Cancel – Illustrated as I. Allows you to cancel or remove the changes made to the menu item and collapse the panel.
Custom Link URL Setting – Illustrated as J. The Custom Link menu item has the additional option of a URL setting. This setting allows you to add a custom link as a menu item.
Under the Screen Options at the top of the screen, there are several options you can turn on or off that will display on the Menu items, such as Link Target & Description.
Avada Menu Options SettingsMenu First Level Style – Allows you to make the menu item regular text or a button. Choose between Default Style which is regular text, Button Small, Button Medium, Button Large, Button xLarge. The button styling is determined by the default button styles in Avada > Theme Options > Avada Builder Elements > Button Element;
Icon Select – Allows you to select a Font Awesome icon for the menu item.
Icon/Thumbnail Only – Allows you to optionally show only the selected icon or only the thumbnail image without the menu text, as the menu item. Note: This option doesn』t apply to mobile. Click here for frontend example.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
Mega Menu – Allows you to enable the Avada Mega Menu. Enabling this option will reveal several other Mega Menu specific options.
Mega Menu / Flyout Menu Background Image – Here you can select an image for the mega menu or flyout menu background.
In case of mega menu, if left empty, the Main Menu Dropdown Background Color will be used. Each mega menu column can have its own background image, or you can have one image that spreads across the entire mega menu width. When used in the flyout menu, the image will be shown full screen when hovering the corresponding menu item.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons. This option is only available if the Enable Avada Mega Menu option is set to On.
Full Width Mega Menu – Allows you to make the Mega Menu full width. This will be the site width as set in your Theme Options. This option is only available if the Enable Mega Menu option is set to On.
Mega Menu Number of Columns – Allows you to set the number of Mega Menu columns. Choose between Auto or 1 to 6. This option is only available if the Enable Avada Mega Menu option is set to On.
Child Level Menu SettingsThese settings are located in any child level menu item』s Avada Menu Options area.
Icon Select – Allows you to choose a Font Awesome icon for your menu item.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
If the Parent Menu Item has Mega Menu enabled, you will also these the following options in the Child Item Avada Menu Options.
Mega Menu / Flyout Menu Background Image – Allows you to select a background image for the menu or column with Mega Menu or for each menu item with Flyout Menus. When this is set for the Parent level mega menu item, it will be applied as a single background that stretches across all child level menu items. You can also add a background image for each child level mega menu item individually in their menu item settings.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons; This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Column Width – Allows you enter a percentage value to determine the Mega Menu』s column width. For example, 25%. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item. View additional documentation here.
Mega Menu Column Title – Allows you to toggle the Mega Menu column title on/off. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Widget Area – Allows you to add a widget to the menu item. Second & third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create widget areas and how to add widgets to it here. Once you』re done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the 「Mega Menu Widget Area」 drop down field. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.

Menu Navigation Heights

Setting the main navigation height is important in keeping your website organized and visually appealing. Avada gives you the options to manage this with ease. Continue reading below to discover how to manage your websites main navigation height.
How To Set The Main Menu Navigation HeightStep 1 – Go to Avada > Theme Options > Menu > Main Menu > Main Menu Height.
Step 2 – Enter a numeric value in pixels (px) to adjust the 『Main Menu Height』 or drag the slider left/right.
Step 3 – Click 『Save Changes』.
How To Set The Mobile Menu Navigation HeightStep 1 – Go to Avada > Theme Options > Menu > Mobile Menu > Mobile Menu Dropdown Item Height.
Step 2 – Enter a numeric value in pixels (px) to adjust the 『Mobile Menu Dropdown Item Height』 or drag the slider left/right.
Step 3 – Click 『Save Changes』.

Mega Menu Width

Avada includes a flexible Mega Menu that you can use to completely personalize your website』s menu.
You can set each column』s width individually, or have the menu fill the site width, a custom width or 100% width. We will be talking about these options in detail below.
Before reading this article, we recommend reading our introductory article on Using The Mega Menu and how to set this up. For more info on the Mega Menu』s width settings, please continue reading below.
Mega Menu Full WidthYou can choose to set your Mega Menu』s width to span the full site width. Please note that the Mega Menu』s full width option initially adheres to the value set in the Avada > Theme Options > Layout > Site Width option. For example, if you』ve set your Site Width to 1120px the Mega Menu』s full width will equal 1120px. Setting your Mega Menu to full width overrides the individual column widths set in your Second Level menu items.
There are also further Mega Menu Site Width options in the Theme Options under Avada > Theme Options > Menu > Mega Menu. Here you can override that site width with two new options – Custom Width and 100% Width. Read on further below to find out more about these options.
How To Set The Mega Menu To Full WidthStep 1 – Go to WP Dashboard > Appearance > Menus, locate the first level menu item and click the Avada Menu Options button.
Step 2 – Once the settings window has opened, locate and activate the Fusion Mega Menu & Full Width Mega Menu settings as seen in the example image for this section.
Step 3 – Click 『Save』 to close the Avada Options window and scroll to the bottom and click 「Save Menu」 to save your changes made to the menu.
Mega Menu Column WidthYou can also choose to set your Mega Menu』s column widths individually. This gives you more control over your Mega Menu and how you might want to display it. You set each column』s width by entering a percentage, i.e, 25%.
Remember that 100% is equivalent to the value you』ve set in your Site Width option located in Fusion Theme Options. So if you make it so your column widths equal to 100%, you will have a Full Width Mega Menu. For example, if you have 2 columns in your Mega Menu and you set them to 75%, and 25%, you will end up with a Full Width Mega Menu.
How To Set Column Widths IndividuallyStep 1 – Go to WP Dashboard > Appearance > Menus, locate the first level menu item and click the Avada Options button.
Step 2 – Under the same First Level menu item, make sure the Full Width Mega Menu option is set to Off. If the Full Width Mega Menu is enabled, your custom column widths will not show on the second level menu items.
Step 3 – In your Second Level menu item, enter the percentage value for your Column Width under the Mega Menu Column Width field.
Step 4 – Repeat Step 3 for all your Second Level menu items until you』ve set their respective Column Widths.
Step 5 – Click 「Save Menu」 to save your changes made to the menu.
IMPORTANT NOTE: Make sure the Full Width Mega Menu option is unchecked in order for the Mega Menu Column Width option to appear.767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Mega Menu Max-Width Theme OptionsThe Mega Menu Max-Width options are located in Avada > Theme Options > Menu > Mega Menu panel. These options allows you to set a maximum width for the mega menu drop down that is different from the overall site width.
Site WidthThe default value is Site Width, and as long as the Site Width value chosen in Layout > Site Width is in pixels, and not in percentage (%), then the Mega Menu width will automatically match the Site Width.
The Mega Menu needs a pixel value to work correctly, and it cannot take a percentage (%) value. However, the Site Width can take both pixel and percentage (%) values.,100% WidthThe second option is 100% Width. When this is selected, a further option called Mega Menu Interior Content Width appears below this. This option controls the width of the interior content of the mega menu, and two choices appear with this option – Site Width or 100% Width.
Choosing Site Width will make the Mega Menu full width, but the actual menu items will be constrained to the Site Width value. If you select 100% Width, the menu items will stretch across the entire width of the screen.
See the examples below the options panel.
Menu > Mega Menu > Mega Menu Interior Content Width > Site Content
Menu > Mega Menu > Mega Menu Interior Content Width > 100% Width,Custom WidthThe last option is Custom Width. When you select this option, you get another Mege Menu Max Width option below it, and here you input a pixel value. With this options you can make the Mega Menu either smaller or larger than the set Site Width.

Main Menu Highlight Styles

Menus are critical navigational tools on websites, and you want your menu to be appealing and easy to use. This is where Menu Styles can play an important role. Updated with Avada 5.9, there is now an even larger range of menu highlight styles that can be chosen for adding an indicator to your Main Menu items when they are the active link, or when you hover over a menu item. Let』s take a look below for more details on each style choice.
Overview
Top Bar Highlight Style – The highlight bar is a line of variable thickness, added above the menu item on hover or when the menu item is active.

Bottom Bar Highlight Style – The Bottom Bar highlight style was introduced with Avada 5.9. The highlight bar is a line of variable thickness added below the menu item on hover or when the menu item is active, that grows outward from the center of the menu item.

Arrow Highlight Style – The Arrow highlight style was a feature introduced in Avada 5.1. It adds an Arrow below the menu items when active or hovered over. This will also add an arrow to the top of any dropdown menu items.

Background Highlight Style – The Background highlight style was a feature introduced in Avada 5.1. It will add a background color of your choice, and variable height, to the menu item when active or hovered over.

Color Only Highlight Style – The Color Only highlight style was introduced with Avada 5.9. It will add a color of your choice to the menu item text when active or hovered over.

Main Menu Dropdown Indicator – This feature was improved in Avada 5.6, with the option of having an arrow indicator next to both parent and child level menu items. This is available to all main menu highlight styles.

Vertically Position Your Main Menu – You can set your desired main menu height, then use Theme Options to vertically position your main menu in the header as needed.,Top Bar Highlight StyleYou can choose the Top Bar highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. Primarily, there are three settings which affect the Top Bar highlight style. These are shown below.

Main Menu Highlight Bar Size – This setting will change the size of the highlight bar. Note: If you want there to be no special highlight effect other than the font color change, you can now choose the Color Only style.

Main Menu Dropdown Top Border Size – This setting will change the size of the top border of the dropdown menus and mega menus. Note: This is not applicable to side headers.

Main Menu Font Hover / Active Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Bottom Bar Highlight StyleThe Bottom Bar highlight style is similar to the Top Bar Highlight Style, but with the bar underneath. This option features a smooth underline, that grows outward from the center of the menu item. The same settings will affect the positioning and style of the Bottom Bar highlight style. These are shown below.

Main Menu Highlight Bar Size – This setting will change the size of the highlight bar. Note: If you want there to be no special highlight effect other than the font color change, you can now choose the Color Only style.

Main Menu Dropdown Top Border Size – This setting will change the size of the top border of the dropdown menus and mega menus. Note: This is not applicable to side headers.

Main Menu Font Hover Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.,Arrow Highlight StyleYou can choose the Arrow highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. This effect will not appear for main menu items when using a transparent header background. However, sub-menu items will still have the lower half of the arrow effect.
This style is most effective when a slider, or page Title Bar, or other colored content sits right up to the header, or if the header itself has a colored background or image. If the header is white, and the content directly below the header is white, the arrows will not be able to be seen.
There are several settings which can be used to adjust the positioning and appearance of the main menu when using this effect. These are listed below, along with an explanation of how they affect your menu.

Main Menu Height – This will affect where the arrow starts in relation to the menu』s text. The menu』s text will be centered within its height. So if you set the height to 40px, the menu』s arrow will be roughly 20px below the text. The exact distance can fluctuate based on your specific line-height setting for the menu text. Menu height will also affect the main menu』s position in the header.

Main Menu Arrow Size – These height and width settings will only apply to the actual arrow itself. They will set the starting width of the arrow at its base and the overall arrow height.
IMPORTANT NOTE: For the arrow effect to be noticed coming off the main menu item, your menu height combined with your arrow height will need to be set high enough for the arrow to extend out below the header as seen here.,Background Highlight StyleYou can choose the Background highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. The Background color will cover the whole menu item』s height as set in the Main Menu Height option seen in the example image for this section.
There are several settings which can be used to adjust the positioning and appearance of the main menu when using this effect. These are listed below, along with an explanation of how they affect your menu.

Main Menu Height – The Background highlight style will apply a background color for the active menu item. The colored area will be the total height of your main menu. Therefore, you can adjust the height of the background area with the Main Menu Height setting. A menu height that matches the logo height would look like this. A main menu height of a smaller size (in this example, 32px) would look like this.

Main Menu Highlight Background Color – You can use this setting to change the color for the highlighted background area.,Color Only Highlight StyleThe Color Only Menu Highlight style is very similar to the TopBar and Bottom Bar highlight styles, just without the bar. The main option that affects it is the Main Menu Font Hover Color, as listed below.

Main Menu Font Hover / Active Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.,Main Menu Dropdown IndicatorIn Avada 5.6 and up, you have the option to choose if you want to have an arrow indicator in both parent and child level menus. In previous versions of Avada, the default was currently set to either just parent or none. This option is available on all main menu highlight styles. To set this, go to Avada > Theme Options > Menu > Main Menu.

Main Menu Dropdown Indicator – This will let you display arrow indicator next to parent level menu items, both parent and child level menu items, or no indicator. See example here.,Vertically Position Your Main Menu Using Theme OptionsRegardless of the menu highlight style that you choose, you』ll likely want the option to set your main menu height and not lose the header』s vertically centered appearance. Here we』ll show you which theme options can be adjusted to get the positioning you like best. Your main menu height will affect the distance between the dropdown menu items and the parent menu, the distance your highlight bar is from the menu item, the highlight background color filled area and the position of your main menu in general.
To adjust your Main Menu』s position in the header, follow these steps:

Step 1 – Set your main menu』s height as you want it to be. This setting is located in Avada > Theme Options > Menu > Main Menu.

Step 2 – Check your frontend with the new menu height to see how your main menu and logo are positioned in the header. If you』ve reduced the menu height, you』ll see that your menu has moved up in the header.
Step 3 – If your logo isn』t already even with your main menu, you can adjust the logo』s position in the header through Theme Options > Logo; then adjust the top and bottom margins as needed.
eg. If your logo is vertically positioned lower in the header, you』ll want to reduce the logo』s top margin. If you have a low menu height, try starting at 10px of top margin and adjusting further as needed. The amount needed will vary depending on your logo image』s and Main Menu』s height.Step 4 – Now that your main menu and logo are evenly positioned with each other, you can change their position in the header through Avada > Theme Options > Header > Header Styling > Header Padding. You can adjust this as needed.
Note: Adding padding will not necessarily change the logo/main menu』s position, but rather, it will change the header』s height as the padding is increased. So if you add 20px of bottom padding to the header, the header』s overall height will increase by 20px and that will be reflected in the lower part of the header.
Review – Now that we』ve positioned our menu as needed, you should notice that: 1) Your dropdown menu and your highlight bar are closer to the parent menu item. And 2), if you are using the Background Highlight style, The Highlight Background color is displayed at its appropriate size.

How To Set Up A Click Mode Menu In The Best Way Using The Menu Element

We are used to menus that open upon hover. But this is not necessarily the best method, either for navigation, or accessibility. With the Menu Element however, you can create menus that open their submenus only on click. But there a few things to be aware of when doing this. Read on…,One is the use of carets. If Click Mode is activated, and Dropdown Carets are enabled, then it is the Carets themselves that need to be clicked to activate the submenu, not the menu item.
This is related to the second issue; the top level menu items. These can be normal page or post links etc, but in this case, clicking on them would redirect the page to the link, and not open the submenu.
So, to avoid these issues when creating a Click Mode Menu, it is best to use custom links set to # as the top level menu item, when a submenu exists, so that if a user clicks on the actual menu item, the submenu will open.

How The Menu Element And Menu Work Together

The Menu Element allows you to display and customize an existing Menu, and can be used anywhere in your content. But it will most typically be used in Custom Header Layouts. See the Menu Element documentation for a full rundown of the element and all of its many options, but in this document, we are going to explore how it works in concert with the actual WordPress menu, and review some common situations using the Menu Element.,OverviewCreating Your Menu In WordPressWhere The Menu Element Stops and The Menu StartsHow The Prebuilt Headers Layouts WorkHow To Add Avada』s Special Menu Items,Creating Your Menu In WordPressThe first step, before using the Menu Element, is to have an existing menu. Menus are core WordPress business, and are created under Appearance > Menus, from the WordPress dashboard. See our Setting Up A Menu doc, or the WordPress Menu User Guide on the WordPress Codex for detailed information on this step.
The Menu Element then controls how the menu displays, but there also some options to be aware of in the Menu itself, that affect the menu』s appearance.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Where The Menu Element Stops And The Menu StartsWhen creating your menu in WordPress, there are several options with the menu and the menu items that will affect how the menu will display on the page, whether assigned via the WordPress Menu Options, or displayed using the Menu Element.
Please review the Menu Settings doc for a full rundown of what you can configure while building a menu, but these primarily include the Avada Menu Options, found in every menu item, and the Avada Special Menu Items, found at the bottom left of the menu area.
For example, with the Avada Menu Options, you can style a menu item as a button, add an icon or show the menu item only as an icon, add a Menu Highlight Label, or enable a Mega Menu on the item. All of these options would affect how the menu displayed when using the Menu Element, and as such, the styling for such aspects of the menu items would come from the Menu itself, and not the Menu Element.
And with the addition of the Avada Special Menu Items in Avada 7.0, this is where you would add things like WooCommerce iconized menus, Search bars and Sliding Bar Toggles, if wanting to use a menu with the Menu Element.,How The Prebuilt Headers WorkWhen importing the Prebuilt Headers, do not be concerned if they don』t initially look exactly as the preview. This is because of the above mentioned connection with the actual menu and its settings. When you import a demo Header, the Menu Element uses the first Menu on the site, and the Image Element will only import a logo if one has been uploaded via the options. Therefore, not all of the Layouts will produce a menu like the previews without some extra work, either adding a logo, selecting the appropriate menu, or building a suitable menu for the corresponding area in the template.
For a detailed rundown of each Pre-Built Header, and what you need to customize, please see the Prebuilt Headers for Layouts document.,How To Add Avada』s Special Menu ItemsTo see details of each specific Special Menu Item, head to the Avada Special Menu Items doc. When assigning Menus via WordPress, these options are added via the Global Options, but when using the Menu Element, these special items need to be added to the menu itself for them to appear. These are the WooCommerce Cart, the WooCommerce My Account, Search functionality, and the Sliding Bar Toggle.
Each of these Special Items has their own Avada Menu Options panel, and can be added to menus by themselves or with other menu items.

Flyout Menu

The Avada Flyout menu type is a full screen menu which overlays the main page content, activated by clicking a link/icon in the header area, as you can see in the screenshot below, or on the Avada Adventure prebuilt website.,The Flyout Menu is only available when using Header 6 in the Top Header position, or with the Mobile (Responsive) Menu. It』s automatic with Header 6, but with the Mobile Menu, you have to select Flyout in the Global Options: Avada > Options > Menu > Mobile Menu > Mobile Menu Design Style. Detailed information regarding the various Avada header layouts to choose from is available here.
IMPORTANT NOTE: Any Child Level menu items will not be displayed on the Flyout menu. Mega Menu features are also disabled on this layout.It』s also possible to create a Flyout Menu when building your header in Avada Layouts. Please see How To Create Flyout Menus in Avada Layouts for more details on that.,Flyout Menu Global OptionsFlyout Menu options are found in two places. The main one is found at Avada > Options > Menu > Flyout Menu, while relevant Mobile Menu options for the Flyout Menu are found at Avada > Options > Menu > Mobile Menu when Flyout is selected.
Let』s look at the Flyout Menu Global Options.
Flyout Menu Icon Font Size – Controls the font size for the flyout menu icons. Enter value including any valid CSS unit, ex: 20px.
Flyout Menu Icon Padding – This controls the right padding (left on RTL sites) for flyout menu icons.
Flyout Menu Icon Color – This controls the color of the flyout menu icons.
Flyout Menu Icon Hover Color – Controls the hover color of the flyout menu icons.
Flyout Menu Background Color – Here you can control both the color and the opacity of the flyout menu background.
Flyout Menu Direction – Here you can control the direction the flyout menu comes from. Choose from Fade, Left, Right, Bottom, or Top.
Flyout Menu Item Padding – This is a new option in Avada 5.8. Here you can control the padding between the flyout menu items.

Desktop And Mobile Menu Typography

Manage your Main Menu Typography with ease with the updated options in Avada Theme Options. In Avada 5.3 and up, Main Menu Font Size and Main Menu Font Color options are now combined in the Menus Typography section. View the old setup here from lower versions. Continue reading below to learn more about the typography options for the Main Menu.,OverviewDesktop Main Menu TypographyMobile Main Menu Typography,Desktop Main Menu Typography OptionsFound under Avada > Theme Options > Menu > Main Menu > Main Menu Typography, you will find the following settings to customize the main menu for Desktop / Laptop / Tablet (anytime a mobile menu is not activated).
Font Family – Illustrated as A. Allows you to select a font family to be used. You can choose any font you prefer for the Main Menu, but the Sub Menu Font Family, however, will be the same as the Body Font Family.
Backup Font Family – Illustrated as B. Allows you to select a backup font family to use in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as C. Allows you to select a font weight and style to use.
Font Subsets – Illustrated as D. Allows you to select which subset to use.
Font Size – Illustrated as E. Allows you to set the size of the text on display.
Letter Spacing – Illustrated as F. Allows you to set the spacing between letters.
Font Color – Illustrated as G. Allows you to set the color of the text.
Font Hover Color – Illustrated as H. Allows you to set the hover color of the text.
Text Align – Illustrated as I. Allows you to set the alignment of text. Note: This option will only appear if you have selected Top Header 4 or 5, or side headers. Check these for more information about Top Header and Side Header positions.
Dropdown Font Color – Illustrated as J. Allows you to set the color of the drop-down text.
Dropdown Font Size – Illustrated as K. Allows you to set the size of the drop-down text.
Side Navigation Font Size – Illustrated as L. Allows you to set the size of the text when you are using the side navigation page template.
Note: Options I,J, and K are not visible for Header Layout 6. Click here for more information about Top Header position.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Mobile Main Menu Typography OptionsFound under Avada > Theme Options > Menu > Mobile Menu > Mobile Menu Typography, you will find the following settings to customize the main menu for phones and anytime a mobile menu is activated (tablets in portrait mode etc).
Font Family – Illustrated as A. Allows you to select a font family to be used.
Backup Font Family – Illustrated as B. Allows you to select a backup font family to use in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as C. Allows you to select a font weight and style to use.
Font Subsets – Illustrated as D. Allows you to select which subset to use.
Font Size – Illustrated as E. Allows you to set the size of the text on display.
Line Height – Illustrated as F. Allows you to set the spacing between lines.
Letter Spacing – Illustrated as G. Allows you to set the spacing between letters.
Font Color – Illustrated as H. Allows you to set the color of the text.
Typography Preview – Illustrated as I.  This area gives you a preview of the typography based upon your selections.
Mobile Menu Hover Color – Illustrated as J. Controls the hover color of the mobile menu item. Also, used to highlight current mobile menu item.
Mobile Menu Text Align – Illustrated as K. Controls the mobile menu text alignment.

Avada Special Menu Items

On the WordPress Menu page, you will find the Avada Special Menu Items. These are at the bottom of the Add Menu Items dialog, found at Appearance > Menus. You can use these special items to add these specific features to your menu when using the Menu Element. Read on to learn more about the special items.
IMPORTANT NOTE: These special items only work in conjunction with the Menu Element.How To Use The Avada Special Menu ItemsThere are a number of special menu items, that we used to add into the menu automatically. Now, you have full control to place them in the menu where you like, plus more control over the appearance/icon. These items can be added to a menu when you build it, at Appearance > Menus. Each one has their own Avada Menu Options dialog to help style the menu item.
IMPORTANT NOTE: The Avada Special Menu Items ONLY work in Top Level Menu Items.,Avada Special Menu ItemsSearchWith this item, you can add the Search function to your Menu, rather than using the Search Element. It has a custom Avada Menu Options dialog with just the one setting.,Sliding Bar ToggleWith this item, you can add a Sliding Bar toggle to your menu. It has a couple of settings around the Icon shown.,Off Canvas ToggleWith this item, you can add the any Off Canvas to your Menu, allowing you to toggle it via a menu link.,WooCommerce CartWith this item, you can add the WooCommerce Cart to your Menu. It has a custom Avada Menu Options dialog with WooCommerce cart relevant settings.,WooCommerce My AccountWith this item, you can add the WooCommerce My Account to your Menu. It has a custom Avada Menu Options dialog with settings for the Icon.

Avada Menu Options

The Avada Menu Options are found when editing individual menu items in WordPress Menus (Appearance > Menus). They allow a range of customization to menu items. Read on to discover more about this excellent menu addition, and to see these options in action, watch the video below. It shows the University Main Menu, and how both Theme Options and Avada Menu Options have been used to control the display of the Menu.,Avada Menu OptionsMenu First Level Style – Allows you to make the menu item regular text or a button. Choose between Default Style which is regular text, Button Small, Button Medium, Button Large, Button xLarge. The button styling is determined by the default button styles in Avada > Theme Options > Avada Builder Elements > Button Element;
Icon Select – Allows you to select a Font Awesome icon for the menu item.
Icon/Thumbnail Only – Allows you to optionally show only the selected icon or only the thumbnail image without the menu text, as the menu item. Note: This option doesn』t apply to mobile. Click here for frontend example.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
Avada Mega Menu – Allows you to enable the Avada Mega Menu. Enabling this option will reveal several other Mega Menu specific options.
Mega Menu / Flyout Menu Background Image – Here you can select an image for the mega menu or flyout menu background.
In case of mega menu, if left empty, the Main Menu Dropdown Background Color will be used. Each mega menu column can have its own background image, or you can have one image that spreads across the entire mega menu width. When used in the flyout menu, the image will be shown full screen when hovering the corresponding menu item.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons. This option is only available if the Enable Avada Mega Menu option is set to On.
Full Width Mega Menu – Allows you to make the Mega Menu full width. This will be the site width as set in your Theme Options. This option is only available if the Enable Mega Menu option is set to On.
Mega Menu Number of Columns – Allows you to set the number of Mega Menu columns. Choose between Auto or 1 to 6. This option is only available if the Enable Avada Mega Menu option is set to On.
Child Level Menu SettingsThese settings are located in any child level menu item』s Avada Menu Options area.
Icon Select – Allows you to choose a Font Awesome icon for your menu item.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
If the Parent Menu Item has Mega Menu enabled, you will also these the following options in the Child Item Avada Menu Options.
Mega Menu / Flyout Menu Background Image – Allows you to select a background image for the menu or column with Mega Menu or for each menu item with Flyout Menus. When this is set for the Parent level mega menu item, it will be applied as a single background that stretches across all child level menu items. You can also add a background image for each child level mega menu item individually in their menu item settings.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons; This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Column Width – Allows you enter a percentage value to determine the Mega Menu』s column width. For example, 25%. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item. View additional documentation here.
Mega Menu Column Title – Allows you to toggle the Mega Menu column title on/off. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Widget Area – Allows you to add a widget to the menu item. Second & third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create widget areas and how to add widgets to it here. Once you』re done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the 「Mega Menu Widget Area」 drop down field. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Avada Special Menu ItemsIn Avada 7.0, some Special menu Items were added to the Menu page, and these all have their own unique Avada menu Option panels. Please see the Avada Special Menu Items page for more information on these.