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.