Boa noite,
Gostaria da ajuda de vocês para inserir ícones no menu superior de minha loja. Alguém poderia me ajudar com o código?
Muito obrigado!
www.lotustabacaria.com.br
3 curtidas
@Eduardo_Lugli segue o código abaixo. Você cola esse código no editar CSS.
Para esse código funcionar você vai ter que colocar o nº ID da categoria que deseja o icone, vi que você tem 9 categorias no menu superior do seu site.
Então você vai ter que achar o id dessas 9 categorias e colar nessa parte do código >> .menu.superior .nivel-um li.categoria-id-COLE AQUI O ID DA CATEGORIA > >
Se você não souber, existem duas formas de achar o ID da categoria:
1º Selecionar a categoria no menu superior do seu site e clicar com o botão direito para inspecionar.
2º Dentro do painel da sua loja você clica em Categorias , vai abrir uma página com todas as categorias que você criou, clica na categoria que você quer colocar o ícone, quando abrir a página deste categoria na barra de endereços do navegador vai ter um número, esse é o ID da categoria. Você copia ele e cola no local indicado no código.
O ícone você tem que subir ele para o servidor da LI e colar o link dele nesta parte do código >> background: url(“Cole aqui o link do código dentro do servidor da LI”) Importante, mantenha as aspas cole o link entre elas.
Para cada categoria você vai ter que criar um código da forma que te falei e colar no CSS da sua loja.
/* Icone menu superior */
.menu.superior .nivel-um li.categoria-id-**COLE AQUI O ID DA CATEGORIA** > a {
background: url("Cole aqui o link do código dentro do servidor da LI") no-repeat left center;
padding-left: 30px;
}
7 curtidas
Oi Pedro, bom dia.
A minha dúvida é diferente, mas vejo que você é bem ativo com relação a personalização dos sites.
Pode me ajudar?
Menu superior
Tirar linhas divisórias do menu superior 1 - entre uma categoria e outra tem um " | ";
Tirar margem superior do menu superior 2 - ao passar o mouse sobre a categoria, aparece uma borda na parte de cima;
Alinhar a esquerda, subcategorias do menu superior 2 - atualmente estão centralizados;
Rodapé
A caixa da rede sociais está me tirando do sério… rsrsrs
Como faço para deixar só os ícones com um tamanho médio?
Já tentei copiar os códigos e mudar com as dicas do “manuais”, mas as alterações não ocorrem… mesmo aguardando de um dia para outro.
Desde já agradeço muito… =D
Pedro, tudo bem?
Você pode me ajudar colocando página extra no menu superior?
Muito obrigado pela ajuda, Pedro!
Agora uma outra dúvida: qual seria o tamanho ideal para os ícones?
Queria deixar os ícones em cima do nome da categoria também…
2 curtidas
Não deu muito certo o código… 
Fiz tudo conforme orientou, porém nada foi modificado.
É o mesmo código que uso no meu site. Não apareceu nenhum ícone?
1 curtida
Sim, não consegui com este que me passou .
Consegui inserir os icones com este código:
/* icone mangueiras */
.menu.superior li.categoria-id-DIGITE O ID DA CATEGORIA.com-filho.borda-principal strong:before {
content: url(URL DA IMAGEM);
display: block;
text-align: center;
margin-top: -5px;
}
Porém meu problema é alinhar e distribuir a grade toda agora, e também saber o tamanho ideal dos icones no menu.
@Eduardo_Lugli eu uso no site as dimensões 24 x 24 px.
E para download dos icones uso o site https://icons8.com.br/
1 curtida
@Eduardo_Lugli para alinhar os ícones com os das outras categorias é só alterar essa parte do código margin-top: -5px; onde está -5px eu fiz um teste no seu site e coloquei -10px e ficaram alinhados. Vai fazendo testes e vê o melhor alinhamento e antes de subir os icones para o servidor da LI tenta deixar todos com a mesma dimensão.
Eu fiz dessa forma aqui na minha loja.
1 curtida
Será que conseguirei alguma ajuda de sua parte? Ou pode me informar alguém que consiga… obrigada. =)
Pedro, muito boa sua explicação. Uma dúvida, seria possível adicionar essa referência como uma página html? Pois o que ocorre, o cara que fez o layout da minha página, parou de me dar suporte a ela, e ele jogou essas informações em página em html, só que eu, muito esperto, apaguei sem querer as paginas htmls.
No meu código CSS ta assim:
li.categoria-id-622861 a i.icone {
background: url(https://c2.staticflickr.com/4/3757/19094644640_d62807f07b_o.png) -25px -481px !important;
}
E os ícones entravam com um apontamento na pagina html, se eu colocar o seu código, eu teria que colocar o css para cada futura categoria.
Consegue me ajudar? rs
Obrigado
Boa tarde Pedro,
Tentei usar o código acima conforme explicou e não apareceu nada , poderia me ajudar?
O nosso site é loja.biobike.com.br
1 - Gostaria de inserir “ícones” nas categorias, parecido com o site “www.lojadomecanico.com.br”.
Valeu Pedrão!!!
Não querendo abusar de sua boa vontade, mas já abusando, você saberia me dizer como posso fazer para que quando o cursor do mouse passe sobre o icone ele mude de cor?
Sei que tenho que trabalhar com duas imagens, mas não faço ideia de como inserir isso no código css.
Obrigado mesmo, você me ajudou demais!
Pedro,
tudo bem?
não consegui inserir o código acima, poderia me ajudar?
fiz o procedimento mas nao apareceu
Olá Pedro, tudo bem?
Estou configurando minha loja (https://atacadoindaia-manutencao.lojaintegrada.com.br/) - não repare nas cores pq ainda estou testando … e queria distribuir melhor o nome das categorias. Como faço isso ? Hoje eles ficam no canto esquerdo e não distribuido igualmente 
…
Outra dúvida, como mudo a cor dessa barra:
Bom dia Pedro! Gostaria de saber como faço para adicionar ícones no menu acima do nome das categorias. De já agradeço
1 curtida
Pedro, tudo bem?
Coloquei esse seu código e achei bacana. Só preciso ajustar o ESPAÇO entre o ícone e a palavra.
Consegue me ajudar, fazendo favor?
Outro ponto: é possível deixar a barra laranja deste menu com a extensão total da página?
www.brancaartesanatos.com.br
Obrigado.
Como ocultar os nomes? ou deixa-los abaixo do icone?
gostaria de saber qual é o código para categorias sem filho…
“com-filho.borda-principal”