Como trocar a cor de um ou mais itens específico do menu

Olá pessoal neste artigo vou mostrar como trocar a cor de um ou mais itens do menu, por exemplo queremos destacar o menu de promoções, outlet, etc.. serve para um ou mais itens.

Por enquanto não temos esta função como base da loja, por isso vamos usar de um recurso avançado de CSS, só manter o foco e atenção nas instruções que vai dar certo, vamos ao passo a passo:

1º) Vá no menu principal (Customização > Menu Principal), escolha o item do menu que deseja colocar a cor de fundo e adicione uma classe a ele no campo “Classe de CSS”, como mostra a imagem abaixo. Obs.: Só vai funcionar para os itens principais, sub-categoria ou menus não funciona bem.

2) Vá no menu de edição de cores (Customização > Personalizar) e vá na aba “Avançado”, aqui temos o campo de “CSS Personalizado”, é onde vamos colocar o código que vai mudar a cor, mas atenção tem que ser exatamente como a estrutura abaixo:

/*
* MENU EM amarelo
*/
.navbar .nav>li.amarelo>a,
.navbar .nav>li.amarelo>a:hover,
#off-canvas-nav .megamenu li.amarelo a,
#off-canvas-nav .megamenu li.amarelo a:hover{
	font-weight: bold;
	font-size: 20px;
	background: #ff8684
}
.navbar .nav>li.amarelo>a,
.navbar .nav>li.amarelo>a:hover,
#off-canvas-nav li.amarelo .menu-title{color: #333 !important;}

Muito importante é seguir a estrutura acima , mudando apenas o “NOME-DA-CLASSE”, deixe exatamente os mesmos caracteres e espaços. As cores serão em hexadecimal, um código web para cores, existe vários sites com esta tabela, neste aqui http://erikasarti.com/html/tabela-cores/ esta classificdo por tons, pode ser muito útil. É importante que copie e cole exatamente os valores e não deixe de colocar o ponto e virgula (;) no final das cores, como na estrutura acima.