How to change the hover color of the header options

By default, header navigation links on your knowledge base site show no color change when readers hover over them. Adding a hover color gives readers a clear visual signal that the header options are interactive links, improves navigation usability, and lets you align the hover effect with your brand palette.

When to use this

Use this customization when you want to:

• Make header navigation links visually respond to hover so readers recognize them as clickable.
• Apply a brand-consistent hover color to the header navigation across your entire knowledge base site.
• Replace a default theme's hover behavior that does not suit your design requirements.

Before you begin

• You need access to Settings (
  ) > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.
• Have your desired HEX color code ready. The default snippet uses red as a placeholder; replace this with your actual color value.

How to change the header hover color

1. Navigate to Settings (

   ) > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.

   

2. From the left navigation pane, select the CSS tab and paste the following snippet.

a[role="menuitem"]:hover {
    color: red !important;
    text-decoration: none;
}

3. Replace red with your desired hover color, for example, a HEX value such as #0077cc or an RGB value.

4. Click Save.

   

Outcome

Before

When readers hover over the header navigation options, there is no color change, and the links appear static.

After

When readers hover over the header navigation options, the link color changes to the specified color, giving clear visual feedback that the item is interactive.

Best practices

• Use a HEX or RGB color value rather than a color name. CSS color names like red are imprecise and rarely match brand palettes exactly. Replace red with your specific HEX code for accurate and consistent results.
• Ensure the hover color contrasts with the header background. A hover color that is too close to the header background color will be imperceptible. Test the visual change in your live knowledge base after saving.
• Keep !important. The Knowledge base site applies its own theme styles that may override standard CSS specificity. Removing !important can cause the hover color not to apply in some theme configurations.
• Test after saving. Open your knowledge base site and hover over each header navigation item to confirm the color change is visible and consistent across all links.