---
title: "Como mudar a cor do hover das opções do cabeçalho"
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-06-22T08:58:57Z
published: 2026-06-22T08:58:57Z
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.

# Como mudar a cor do hover das opções do cabeçalho

Por padrão, os links de navegação de cabeçalhos no site da sua base de conhecimento não mostram mudança de cor quando os leitores passam o mouse sobre eles. Adicionar uma cor de hover dá aos leitores um sinal visual claro de que as opções de cabeçalho são links interativos, melhora a usabilidade da navegação e permite alinhar o efeito de hover com a paleta da sua marca.

---

## Quando usar isso

Use essa personalização quando quiser:

- Faça com que os links de navegação do cabeçalho respondam visualmente ao passar o mouse para que os leitores os reconheçam como clicáveis.
- Aplique uma cor de hover consistente com a marca na navegação do cabeçalho em todo o seu site de base de conhecimento.
- Substitua o comportamento de hover padrão de um tema que não atenda aos seus requisitos de design.

---

## Antes de começar

- Você precisa de acesso às **Configurações** (

) > **site de base de conhecimento** > **Personalização do site** > **CSS & JavaScript personalizados** no portal da base de conhecimento.
- Tenha o código de cores do HEX desejado pronto. O trecho padrão é usado `red` como marcador de lugar; substitua isso pelo valor real da sua cor.

---

## Como mudar a cor do cabeçalho

1. Navegar até **Configurações** (

) > **site da base de conhecimento** > **personalização do site** > **CSS & JavaScript personalizados** no portal da base de conhecimento.

![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. No painel de navegação à esquerda, selecione a aba **CSS** e cole o próximo trecho.

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

1. Substitua `red` pela cor de hover desejada, por exemplo, um valor HEX como `#0077cc` ou um valor RGB.
2. Clique **em Salvar**.

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

---

## Desfecho

**Antes**

Quando os leitores passam o mouse sobre as opções de navegação do cabeçalho, não há mudança de cor e os links aparecem estáticos.

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

**Depois**

Quando os leitores passam o mouse sobre as opções de navegação do cabeçalho, a cor do link muda para a cor especificada, dando um feedback visual claro de que o item é interativo.

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

---

## Melhores práticas

- **Use um valor de cor HEX ou RGB em vez de um nome de cor.** Nomes de cores CSS são `red` imprecisos e raramente correspondem exatamente às paletas de marcas. Substitua `red` pelo seu código HEX específico para resultados precisos e consistentes.
- **Certifique-se de que a cor do hover contraste com o fundo do cabeçalho.** Uma cor de hover muito próxima da cor de fundo do cabeçalho será imperceptível. Teste a mudança visual na sua base de conhecimento ao vivo após salvar.
- **Mantenha `!important`.** O site da base de conhecimento aplica seus próprios estilos de tema que podem sobrepor a especificidade padrão de CSS. Remover `!important` pode fazer com que a cor flutuante não aplique em algumas configurações de tema.
- **Teste após salvar.** Abra seu site de base de conhecimento e passe o mouse sobre cada item de navegação do cabeçalho para confirmar que a mudança de cor é visível e consistente em todos os links.