[AJUDA] Menu superior com ícones - Personalização - Comunidade Loja Integrada
[AJUDA] Menu superior com ícones
Eduardo_Lugli Julho 4, 2018, 3:14am #1
Gostaria da ajuda de vocês para inserir ícones no menu superior de minha loja. Alguém poderia me ajudar com o código?
Pedro Julho 4, 2018, 11:29am #2
@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;
Primianni Julho 4, 2018, 12:52pm #3
A minha dúvida é diferente, mas vejo que você é bem ativo com relação a personalização dos sites.
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;
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
https://primianni-manutencao.lojaintegrada.com.br/
DouglasBrito Julho 4, 2018, 1:33pm #4
Você pode me ajudar colocando página extra no menu superior?
Eduardo_Lugli Julho 7, 2018, 8:00pm #5
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…
Eduardo_Lugli Julho 7, 2018, 8:11pm #6
Não deu muito certo o código…
Fiz tudo conforme orientou, porém nada foi modificado.
Pedro Julho 7, 2018, 11:03pm #7
É o mesmo código que uso no meu site. Não apareceu nenhum ícone?
Eduardo_Lugli Julho 8, 2018, 2:05pm #8
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);
Porém meu problema é alinhar e distribuir a grade toda agora, e também saber o tamanho ideal dos icones no menu.
Pedro Julho 8, 2018, 2:28pm #9
@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/
Pedro Julho 8, 2018, 2:33pm #10
@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.
Primianni Julho 9, 2018, 11:25am #11
Será que conseguirei alguma ajuda de sua parte? Ou pode me informar alguém que consiga… obrigada. =)
Queiroz_Thiago Julho 9, 2018, 4:20pm #12
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
Biobike Julho 10, 2018, 4:15pm #13
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�.
Eduardo_Lugli Julho 14, 2018, 12:43pm #14
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!
Israel1 Julho 17, 2018, 2:18am #15
não consegui inserir o código acima, poderia me ajudar?
fiz o procedimento mas nao apareceu
Cleber1 Julho 18, 2018, 7:44pm #16
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:
SamuelKoxta Agosto 24, 2019, 1:25pm #17
Bom dia Pedro! Gostaria de saber como faço para adicionar ícones no menu acima do nome das categorias. De já agradeço