Como mudar a cor de cada item do Menu do seu WordPress

Já precisou mudar a cor de cada um dos itens do menu de navegação do seu site WordPress? Ou apenas mudar a cor de fundo cada item? Não é raro esse tipo de layout ser pedido por alguns clientes, então vamos dar uma olhada em como podemos querer usar uma cor diferente para o texto sobre cada item de menu e outra para quando alguém passa o mouse sobre cada item.

Os menus de navegação do WordPress normalmente ocupam um espaço considerável do arquivo style.css de alguns templates mas complexos, o que faz com o que trabalho de personalização do menu e de seus elementos seja uma tarefa mais difícil

Para evitar um trabalho excessivo vou colocar o código para ser usado, em seguida, explicar um pouco sobre cada parte do código. Lembre-se que você pode modificar as cores de acordo com a identidade visual do seu site. Assim como você pode precisar fazer alguns ajustes no CSS do seu template.

Vamos personalizar o menu com as características da imagem abaixo:

Adicionando as Classes CSS

O primeiro passo é ir até inserir a Classe CSS que em cada um dos itens do menu a ser editado. Para isso, dentro da área administrativa do seu WordPress, vá até Aparência > Menus. Na parte superior direita da tela e clique na aba “Opções deste Ecrã” e marque a caixa “Classes CSS” em “Mostrar menu de propriedades avançadas”.

Em seguida vá a cada item do menu para então adicionar um nome exclusivo de classes CSS para cada item.

Depois de adicionar as novas classes para cada item do menu, você usará essas classes ao estilo de cada um dos itens em seu arquivo CSS.

Folha de estilo CSS

Abaixo está o código usado para modificar o estilo do menu de navegação .

.home-nav {
    background: #0F222E;
}

.menu-primary li.home-nav a:hover {
    background: #fff;
	color: #333;
}

.comeca-nav {
    background: #1A3A4F;
}

.menu-primary li.comeca-nav a:hover {
    background: #fff;
	color: #333;
}

.artigo-nav {
    background: #265573;
}

.menu-primary li.artigo-nav a:hover {
    background: #fff;
	color: #333;
}

.solucoes-nav  {  
background: #386D73;
}

.menu-primary li.solucoes-nav a:hover {
    background: #fff;
	color: #333;
}

.perguntas-nav {  
background: #81A68A;
}

.menu-primary li.perguntas-nav a:hover {
    background: #fff;
	color: #333;
}

.contato-nav {  
background: #9FBF8F;
}

.menu-primary li.contato-nav a:hover {
    background: #fff;
	color: #333;
}

.nav-primary a:hover, .nav-primary .current-menu-item > a {
    color: #333;
	background: #fff;
}

.menu-primary a:hover {
-webkit-box-shadow: 5px 5px 5px rgba(50, 50, 50, 50);
-moz-box-shadow:    5px 5px 5px rgba(50, 50, 50, 50);
box-shadow:         5px 5px 5px rgba(50, 50, 50, 50);
}

.menu-primary a, .menu a {
color: #fff;
}

.genesis-nav-menu .sub-menu a {
color: #333;
}

O que cada Classe CCS faz

.home-nav – Esta é a única classe que você pode adicionar para cada item do menu e usar o estilo a aparência estática de cada item do menu. Neste caso, usei para mudar a cor de fundo de cada item quando o mouse passar por cima.

.menu-primary li.home-nav a:hover – Essas classes incluem tanto as classes personalizadas adicionados a cada item de menu e classes para que o único alvo do menu principal. Incluem também a classe que afeta a cor do hover. Neste caso, a cor de foco é definido como branco (# fff) para que em cada item o texto mude de cor em foco para um cinza escuro (# 333).

.nav-primary a:hover, .nav-primary .current-menu-item > a – Estas classes de indicam a cor do menu de navegação principal para cada item quando a página referente ao item é visitadan mudando de cor de fundo de cada item ativo para o branco e a cor do texto em cinza.

.menu-primary a:hover – Este CSS apenas gera o efeitos de cada item quando o cursos passa pelo item, adiciona um efeito de sombra para cada item.

.menu-primary a, .menu a – Essas classes apenas efetuar a cor do texto estático, que eu mudei para o branco.

Conclusão

Como vimos é possível personalizar o menu de navegação de seu WordPress sem o uso de um plugin, apenar criando classes CSS, e usando a opção nativa do CSS de criar um menu e determinar a classe de cada item.

Depois que fizer a personalização do meno do seus site venha aqui e deixe seus comentários sobre o resultado.

Abraços,
Bruno Rodrigo