---
title: "Hoe verander je de hoverkleur van de headeropties"
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-22T09:03:37Z
published: 2026-06-22T09:03:37Z
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.

# Hoe verander je de hoverkleur van de headeropties

Standaard tonen headernavigatielinks op je kennisbanksite geen kleurverandering wanneer lezers eroverheen zweven. Het toevoegen van een hover-kleur geeft lezers een duidelijk visueel signaal dat de headeropties interactieve links zijn, verbetert de navigatiebruikbaarheid en stelt je in staat het hover-effect af te stemmen op je merkpalet.

---

## Wanneer dit te gebruiken

Gebruik deze aanpassing wanneer je wilt:

- Laat headernavigatielinks visueel reageren op hover, zodat lezers ze als klikbaar herkennen.
- Pas een merkconsistente hoverkleur toe op de headernavigatie over je hele kennisbasissite.
- Vervang het hovergedrag van een standaard thema dat niet aansluit bij jouw ontwerpvereisten.

---

## Voordat je begint

- Je hebt toegang nodig tot **Instellingen** (

) > **Kennisbanksite** > **Site-aanpassing** > **Custom CSS & JavaScript** in het kennisbankportaal.
- Zorg dat je gewenste HEX-kleurcode klaar is. Het standaardfragment wordt gebruikt `red` als tijdelijke aanduiding; vervang dit door je daadwerkelijke kleurwaarde.

---

## Hoe verander je de hoverkleur van de header

1. Navigeer naar **Instellingen** (

) > **Kennisbanksite** > **Site-aanpassing** > **Custom CSS & JavaScript** in het kennisbankportaal.

![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. Selecteer in het linker navigatiepaneel het **CSS-tabblad** en plak het volgende fragment.

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

1. Vervang `red` bijvoorbeeld door de gewenste hoverkleur, een HEX-waarde zoals `#0077cc` een RGB-waarde.
2. Klik **op Opslaan**.

![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)

---

## Uitkomst

**Voorheen**

Wanneer lezers met de muis over de navigatieopties van de header gaan, is er geen kleurverandering en verschijnen de links statisch.

![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)

**Na**

Wanneer lezers met de muis over de navigatieopties in de header gaan, verandert de linkkleur naar de gespecificeerde kleur, wat duidelijke visuele feedback geeft dat het item interactief is.

![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

- **Gebruik een HEX- of RGB-kleurwaarde in plaats van een kleurnaam.** CSS-kleurnamen zijn `red` onnauwkeurig en komen zelden exact overeen met merkpaletten. Vervang `red` door je specifieke HEX-code voor nauwkeurige en consistente resultaten.
- **Zorg ervoor dat de hoverkleur contrasteert met de achtergrond van de header.** Een hoverkleur die te dicht bij de achtergrondkleur van de header ligt, zal onmerkbaar zijn. Test de visuele verandering in je live kennisbank na het opslaan.
- **Behoud `!important`.** De Knowledge Base-site hanteert zijn eigen themastijlen die de standaard CSS-specificiteit kunnen overschrijven. Verwijderen `!important` kan ervoor zorgen dat de hover-kleur niet meer wordt toegepast in sommige themaconfiguraties.
- **Test na het opslaan.** Open je kennisbanksite en muis met de muis over elk headernavigatieitem om te bevestigen dat de kleurverandering zichtbaar en consistent is over alle links.