---
title: "How to change the hover color of the header options"
slug: "how-to-change-the-hover-color-of-the-header-options"
description: "You would want to change the hover color of the header options at the article top. You can customize the hover color as per your requirement."
tags: ["Customization", "Knowledge base design"]
updated: 2026-06-20T09:47:32Z
published: 2026-06-20T09:47:32Z
canonical: "docs.document360.com/how-to-change-the-hover-color-of-the-header-options"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)
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;
}
```

1. Replace `red` with your desired hover color, for example, a HEX value such as `#0077cc` or an RGB value.
2. Click **Save**.

![CSS tab showing the header hover color snippet saved in the Custom CSS and JavaScript panel](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767002579133.png)

---

## Outcome

**Before**

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

![Header navigation links with no visible color change on hover](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot-Header_Color_before_hovering.png)

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

![Header navigation links showing a red hover color after applying the CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-Header_Color_while_hovering.png)

---

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