Main Menu Highlight Styles
The highlight style decides how a main menu link shows that it is active or that the pointer is over it: with a bar, an arrow, a colored background or just a different text color. It also changes how the dropdowns of the main menu look.
The option belongs to the header that is built from the global options. If your site uses a header built as a layout section, this option does not apply; see the last section.
In this article: Where to Find the Option · The Five Styles · Things to Know About Arrow and Background · If the Options Are Not There · Related
Where to Find the Option
Go to Tirenoa › Options, open Navigation › Menu › Main Menu and look for Main Menu Highlight Style. The default is Top Bar.
The option is hidden when the header position is Top and Header Layout #6 is selected, because that layout shows a flyout menu instead of a menu row.
The Five Styles
| Style | What you see | Options that go with it |
|---|---|---|
| Top Bar | A bar above the active or hovered link. In a side header the bar is vertical. | Main Menu Highlight Bar Size, Main Menu Dropdown Top Border Size |
| Bottom Bar | The same bar below the link. | Main Menu Highlight Bar Size, Main Menu Dropdown Top Border Size |
| Arrow | A small arrow under the link, pointing out of the header. In a side header it points sideways. Links with a dropdown get a second arrow in the dropdown color. | Main Menu Arrow Size |
| Background | The whole menu item gets a background color. | Main Menu Highlight Background Color |
| Color Only | Only the text color changes. | None |
The options in the third column appear only while their style is selected. For all styles, Main Menu Font Hover/Active Color sets the text color of the active and hovered link. The same color is used for the highlight bar and the dropdown border.
Things to Know About Arrow and Background
- Arrow needs a solid header background. The arrow is drawn in the header background color, so it looks like a notch cut out of the header. With a transparent header there is no color to draw it in, and the style cannot work.
- Arrow size. Main Menu Arrow Size sets width and height. The default is 23px wide and 12px high.
- Background needs two matching colors. The highlighted link sits on Main Menu Highlight Background Color, and its text takes Main Menu Font Hover/Active Color. Choose two colors that are easy to read together, and check Main Menu Height and Main Menu Item Padding, which set the size of the menu items.
Note: The option text in the admin says it too: Arrow and Background can need changes to other options before they look right. Change one option at a time and check the header after each change.
If the Options Are Not There
When a global header is set under Tirenoa › Layouts, the Main Menu tab shows only a note that its options are not available. The header is then built in the Builder, and its menu is a Menu Element with its own hover and active settings, such as Main Menu Hover Transition. Change the look of the menu there, in the header layout section.