Main Menu Highlight Styles

03/13/2017

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.
  • 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 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. Note: Your menu height combined with your arrow height will need to be high enough for the arrow to poke 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.

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 high enough for the arrow to poke 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.

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 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.
6 Likes
Proudly Serving Over 390000 Satisfied Users!