Como trocar a cor do menu do site
Você pode personalizar facilmente as cores do menu do seu site editando o CSS diretamente no painel administrativo da plataforma Agile B2B.
Onde editar o CSS?
Acesse o Admin da Agile
Vá até Configurações > Layout > CSS
Qual é o seletor do menu?
O seletor principal para os itens do menu é:
.nav-links__item-link
Esse seletor representa cada item do menu no seu site.
Como identificar o componente a ser ajustado?
Para identificar a classe que precisa ser modificada pode clicar com o botão direito do mouse em cima do componente do site e clicar em 'INSPECIONAR', irá apresentar na tela as classes dos componentes que podem ser alterados ou incluídos e alterado dentro do Admin.
Observação: em qualquer alteração a ser realizada é importante salvar o backup do CSS antes de alterar pois caso tenha problemas de novas configurações precisará voltar o backup para corrigir.
Exemplos práticos
Alterar a cor do último item do menu:
.nav-links__item:last-child .nav-links__item-link {
background-color: #FFBF00;
color: #000; /* cor do texto, opcional */
}
Alterar a cor ao passar o mouse (hover):
.nav-links__item-link:hover {
background-color: #FFBF00;
color: #fff; /* muda a cor do texto ao passar o mouse */
}
Outras sugestões de personalização
Você pode usar esses seletores para personalizar:
🔲 Cor do texto dos itens:
.nav-links__item-link {
color: #FF0000;
}
📐 Borda ou arredondamento:
.nav-links__item-link {
border-radius: 5px;
border: 1px solid #FFBF00;
}
⬛ Cor diferente para o menu inteiro:
.nav-links__item-link {
background-color: #333;
color: #fff;
}
Dica importante
🔍 Você pode pesquisar por .nav-links__item-link dentro do CSS atual e colocar as novas regras junto dele.
✅ Ou então, adicione suas regras no final do CSS, o que garante que suas alterações sobrescrevam estilos anteriores.
Evite conflitos
Use seletores mais específicos se notar que suas alterações não estão sendo aplicadas.
Sempre salve e atualize o cache do navegador (Ctrl + F5) após editar o CSS.