标签： menus

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.

Mobile Menu Search

IMPORTANT NOTE: This option is only available in Avada version 5.6 or higher. The current version of Avada is, Avada 7.6 (Released on December 15th, 2021)Newly released for Avada 5.6 is the option to enable a search icon/field for your mobile menu regardless on which header type you choose.
Enable/Disable The Mobile Menu Search Icon/FieldStep 1 – Navigate to Avada > Theme Options > Menu > Mobile Menu. Options shown on this section will vary depending on your selected header type. Click here to know more about the Mobile Menu settings.
Step 2 – Look for 『Display Mobile Menu Search Icon/Field』 option and set this to ON.
Choosing A Header TypeCurrently, there are 7 header types to choose from in the Avada Theme Options.
Step 1 – Navigate to Avada > Theme Options > Header to access the header options.
Step 2 – Expand the Header Content section and select your desired Header type.
Main Header Setup Info

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.

Mobile Menu Settings

With Avada theme being responsive and mobile-friendly, this includes a mobile responsive menu as well. Having a Mobile Menu makes it easier for the users to navigate your website on devices with smaller screen size, especially if you have a lot of pages/menu items. Avada has specific section in Theme Options to help you customize your Mobile Menu with ease. Continue reading below to know more about customizing and setting up Mobile Menu.
Mobile Menu OptionsNavigate to Avada > Theme Options > Menu > Mobile Menu section and you will see the available options for Mobile Menu.
IMPORTANT NOTE: Mobile Menu Search Icon/Field and Mobile Header Background Color are the only options available for your Header Layout #6, the other options are only available when using Header Layouts #1-5 or 7. The rest of the options for Header #6 are on the Flyout Menu and Main Menu tab.Mobile Menu Design Style – Illustrated as A. Controls the design of the mobile menu. Choose between Classic, Modern, or Flyout. Flyout design style only allows parent level menu items. Note: When you select Flyout design, only a few options will be available. You can find other options for Flyout in the Flyout Menu section.
Mobile Menu Icons Top Margin – Illustrated as B. Controls the top margin for the icons in Modern and flyout menu design. Manually enter a value (0-200) or drag the slider left/right.
Mobile Menu Dropdown Item Height – Illustrated as C. Controls the height of each dropdown menu item. Manually enter a value (0-200) or drag the slider left/right.
Mobile Menu Dropdown Slide Outs – Illustrated as D. Turn on to allow dropdown sections to slide out when tapped.
Display Mobile Menu Search Icon/Field – Illustrated as E. Turn on to display the search icon/field in the mobile menu.
Mobile Menu Sub-Menu Indicator – Illustrated as F. Turn on to display the mobile menu sub-menu indicator: 「-「.
Mobile Header Background Color – Illustrated as G. Controls the background color of the header on mobile devices.
Mobile Archive Header Background Color – Illustrated as H. Controls the background color of the archive page header on mobile devices.
Mobile Menu Background Color – Illustrated as I. Controls the background color of the mobile menu dropdown and classic mobile menu box.
Mobile Menu Background Hover Color – Illustrated as J. Controls the background hover color of the mobile menu dropdown.
Mobile Menu Border Color – Illustrated as K. Controls the border and divider colors of the mobile menu dropdown and classic mobile menu box.
Mobile Menu Toggle Color – Illustrated as L. Controls the color of the mobile menu toggle icon.
Font Family – Illustrated as M. Controls the font family to be used.
Backup Font Family – Illustrated as N. Controls the backup font family to be used in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as O. Controls the font weight and style to be used.
Font Subsets – Illustrated as P. Controls the font subset to be used.
Font Size – Illustrated as Q. Controls the size of the text on display.
Line Height – Illustrated as R. Controls the spacing between lines.
Letter Spacing – Illustrated as S. Controls the spacing between letters.
Font Color – Illustrated as T. Controls the color of the text.
Mobile Menu Hover Color – Illustrated as U. Controls the hover color of the mobile menu item. Also, used to highlight current mobile menu item.
Mobile Menu Text Align – Illustrated as V. Controls the mobile menu text alignment. Choose between Left, Center, or Right.
How to assign a Mobile MenuStep 1 – Navigate to Appearance > Menus section.
Step 2 – Click 『Manage Locations』 tab.
Step 3 – Select a menu from the dropdown for the Mobile Navigation area. If you do not have a menu, please create one. Check this to know more about setting up a new menu.
Step 4 – Don』t forget to click 『Save Changes』 button.

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.

One Page Menu with Multi-Page Links

When creating a menu for a website that has anchor links as well as normal links to other pages, you may find that your menu items with anchor links may not work or behave as expected. If you』d like to know more about why this is and how to properly create a menu with a combination of absolute and relative links, please continue reading our detailed guide below.
IMPORTANT NOTE – Please note that anchor links won』t work with the Header Layout #6 that comes with Avada version 4.0.Absolute Vs. Relative LinksTo fully understand the process of of creating a menu with anchor links and normal links, we first need to understand the difference between absolute links and relative links. Please continue reading below for a brief description of each type of links and how they work.
Absolute LinksAn absolute link contains your full site URL. For example, http://www.theme-fusion.com or http://www.theme-fusion.com/about#team. As you can see from the second example, an absolute link may also contain an anchor that is located on another page. Unlike a relative link, using an absolute link as a menu item to point to an anchor on another page will always work, regardless of which page on the website you』re currently on.
Relative LinksRelative links are links which are local or relative to only a specific page. Meaning, the browser will have to be on that page for the link to navigate to the desired location. For example, if the About page contains an Avada Menu Anchor element or an element with the ID team, then a menu item that has the #team relative link as the menu item』s URL, that menu item will only work on the About page.
Creating A Multi-Page MenuThe proper way to create a menu that has both relative and absolute links would be to create two separate menus. One menu to act as your Main Menu, and one menu specifically tailored for the page that contains the anchor links. You』ll then assign your main menu normally, and the specific menu to the corresponding page using Fusion Page Options. Below is a detailed guide on creating both menus.
How To Create Your Main MenuStep 1 – Go to the Appearance > Menus tab and create a new menu.
Step 2 – Build your menu as you normally would. For the links that you』d like to point to an anchor on a specific page, insert a 『Custom Link』 and use the absolute link of the anchor. For example, if the anchor you』d like to point to is on the About page, then your URL will look like this: http://www.website.com/about#team
Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective absolute links.
Step 4 – Set this menu as your Main Navigation by checking the 『Main Navigation』 checkbox under Menu Settings.
Step 5 – Save all your changes by clicking the 『Save Menu』 button.
How To Create Your Specific MenuStep 1 – Go to the Appearance > Menus tab and create a new menu. Give it a unique name. For example, About Page Menu. For a visual guide of the steps, click here.
Step 2 – Build your specific menu identical to your main menu. This time, instead of putting absolute links in the menu items that point to an anchor on another page, you』ll insert their relative link. For example, if the absolute link is http://www.website.com/about#team, then you』ll replace it with just #team as seen in in example image.
Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective relative links.
Step 4 – Save all your changes by clicking the 『Save Menu』 button.
Step 5 – Navigate to the specific page that contains the anchor links.
Step 6 – Go to Fusion Page Options > Header and select your specific menu from the dropdown on the Main Navigation Menu option.
Step 7 – Save all your changes by clicking 『Save Draft』 or 『Publish』.
Why Create A Multi-Page Menu This Way?Creating two menus is the proper way to create a multi-page menu because it』s the best way to display relative links. If you only use one menu and only use relative anchor links for your menu items, then those menu items will not work unless you』re in the specific page where those anchors are found. This is because WordPress just appends the anchor to the current URL.
On the other hand, If you only use absolute links, then all your menu items containing the anchor links will all be highlighted when you』re in the specific page where those anchors are found. This is because as far as WordPress is concerned, you』re already on that anchor because you』re on the specific page they』re located.