Main Menu Highlight Styles

Main Menu Highlight Styles

09/07/2018

There are several styles that can be chosen for adding an indicator to your Main Menu items when they're the active link or when you hover over a menu item. Let's take a look below for more details on each style choice.

  • Bar Highlight Style - The highlight bar is a line added above the menu item on hover or when the menu item is active. You can see this in use on our Classic Demo. It looks like this. Please see below for more details.
  • Arrow Highlight Style - The Arrow highlight style was a feature introduced in Avada 5.1. It will add an Arrow below the menu items when active or hovered over. This will also add an arrow to the top of the dropdown menu items as seen here. Please see below for more details.
  • Background Highlight Style - The Background highlight style was a feature introduced in Avada 5.1. It will add a background color of your choice to the menu item when active or hovered over. It looks like this. Please see below for more details.
  • Main Menu Dropdown Indicator - This feature was improved in Avada 5.6 with the option on having an arrow indicator next to both parent and child level menu items. This is available to all main menu highlight styles. Please see below for more details.
  • 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. See below for more details on how this can be done.

Bar Highlight Style

You can choose the Bar highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. Primarily, there are two settings which affect the Bar highlight style. These are shown in the example images for this section.

  • 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'll choose the Bar highlight style and set the bar's size to 0.
  • 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 act as the color used for the highlight bar.

Arrow Highlight Style

You 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.

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. Please Note: 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.
  • 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 Style

You 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. You can adjust the background area with the Main Menu Height setting. A menu height of 86px will look like this. A main menu height of 30px will look like this.
  • Main Menu Highlight Background Color - You can use this setting to change the color for the highlighted background area.

In Avada 5.6, you now have the option to choose if you want to have an arrow indicator in both parent and child level menus. In the previous versions of Avada, the default is 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.

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 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 is closer to its parent menu item. 2) Your Highlight Bar is closer to its menu item. And 3) The Highlight Background color is displayed at its appropriate size.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept