Main Menu Highlight Styles

Legacy Doc

Last Update: April 16, 2024

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. There is a large 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.

Main Menu Highlight Style

Top Bar Highlight Style

Top Bar Menu Highlight Style

You can choose the Top Bar highlight style for your menu items in Avada > 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 Options panel in Avada > 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.

Menu Highlight Styles - Top & Bottom Bar Settings
Menu Highlight Styles - Font Color

Bottom Bar Highlight Style

Bottom Bar Menu Highlight Style

The 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 Options panel in Avada > 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 Style

Arrow Menu Highlight Style

You can choose the Arrow highlight style for your menu items in Avada > 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.

Menu Highlight Styles - Arrow Style Settings

Background Highlight Style

Background Menu Highlight Style

You can choose the Background highlight style for your menu items in Avada > 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.

Menu Highlight Styles - Background Style Settings

Color Only Highlight Style

Background Menu Color Only Style

The 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 Options panel in Avada > 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.

Menu Highlight Styles - Font Color

Main Menu Dropdown Indicator

In 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 > 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 Global Options

Regardless 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 global 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 > 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 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 > 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.

In this article