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.

   

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;
}

3. Substitua red pela cor de hover desejada, por exemplo, um valor HEX como #0077cc ou um valor RGB.

4. Clique em Salvar.

   

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.

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.

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.