Alinhar itens do cabeçalho

Layout
1

Alguém poderia me ajudar a alinhar esses 3 icones? e se mudar me explicar como adiciona na barra de categorias tbm…

Sem título
Sem título1366×768 88.7 KB

2

Olá!!

Acabei de ver sua loja, acredito que você já realizou uma modificação e não necessita mais alinhar, mas caso queira adicionar iconografia no menu ainda, eu posso ajudar.
Você pode fazer isso utilizando CSS. Primeiro, descubra o ID da categoria que você quer colocar o ícone, uma maneira de encontrar sem procurar no código é acessando a categoria no painel (Produtos > Categorias). Exemplo: “Anéis” - ID: 16398587.
Depois de encontrado, basta inserir o estilo com a URL do seu ícone (Visual > Editar CSS):

#cabecalho .menu .titulo {
  position: relative;
}

#cabecalho .menu .titulo::before {
  position: absolute;
  left: -32px;
}

/* Anéis */
#cabecalho .menu .categoria-id-16398587 .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Brincos */
#cabecalho .menu .categoria-id-16398567 .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Colares */
#cabecalho .menu .categoria-id-16398546 .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Pulseiras */
#cabecalho .menu .categoria-id-16398539 .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Tornozeleiras */
#cabecalho .menu .categoria-id-16398551 .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Conjuntos */
#cabecalho .menu .categoria-id-16436595 .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

Ou caso você não queria utilizar os IDs das categorias, que garantem que sempre vai ser exibido o ícone correto, pode-se selecionar com base na posição dos elementos:

#cabecalho .menu .titulo {
  position: relative;
}

#cabecalho .menu .titulo::before {
  position: absolute;
  left: -32px;
}

/* Item #1 */
#cabecalho .menu li:nth-child(1) .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Item #2 */
#cabecalho .menu li:nth-child(2) .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Item #3 */
#cabecalho .menu li:nth-child(3) .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Item #4 */
#cabecalho .menu li:nth-child(4) .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Item #5 */
#cabecalho .menu li:nth-child(5) .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

/* Item #6 */
#cabecalho .menu li:nth-child(6) .titulo::before {
  content: url(http://placehold.jp/16x16.png);
}

Você pode subir as imagens dos ícones no próprio painel: Configurações > Gerenciador de arquivos

Espero ter ajudado, até mais!!

4 curtidas
3

Muito obrigada! vou tentar fazer aqui, o link pode ser colocando a foto no arquivo da LI e pegando o link ou tem que ser do jeito que vc mandou?

1 curtida
4

Imagina!

Isso, pode subir o ícone no próprio painel (Configurações > Gerenciador de arquivos) e copiar o Link. Esse que eu mandei, foi apenas um exemplo de imagem no tamanho 16x16px para você saber onde substituir pela sua.

Espero ter ajudado, até mais!!

1 curtida
5

Ajudou muito! sucesso e paz pra você! boa noite

1 curtida