---
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: ["Knowledge base design", "Customization"]
updated: 2026-03-10T04:32:18Z
published: 2026-03-10T04:32:18Z
---

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

You may want to customize the hover color for the header options at the top of the article to suit your preferences. Follow the below steps to customize your header options while hovering them.

## Solution

1. Navigate to **Settings** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.

![Site customization options for a knowledge base, including theme and branding settings.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&amp;%20js.png)
2. From the left navigation pane, click on the **CSS**tab and paste the following CSS snippet:

Knowledge base site 1.0Knowledge base site 2.0

```css
header .header_top .header_top_nav ul li a:hover {
color: red !important;
text-decoration: none;
}
```

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

1. Update the hover color as per your requirement.
2. Click **Save**.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767002579133.png)

### Outcome

#### Before

When you hover over the header menu options, there is no color change.

![Overview of Document360 Knowledge base site's header menu.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot-Header_Color_before_hovering.png)

---

#### After

When you hover over the header menu options, the color changes to red. This will enhance the user experience.

![Overview of Document360 Knowledge base site's header menu.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-Header_Color_while_hovering.png)