Ícones da versão mobile desalinhados

Layout
1

Bom dia, pessoal! Alguém pode me ajudar?
Estou utilizando um tema da Loja integrada e no Desktop está perfeito, mas no mobile os ícones do menu ficam todos desalinhados.
Não sou expert em css, sei que precisa inserir um código mas não sei como.

Minha loja: arteemponto.com.br

Super agradeço se puderem me ajudar.

2

boa noite,
tenta assim…

@media screen and (max-width: 766px){
#cabecalho > div.conteiner > div.row-fluid.main-header > nav > ul > li.menu-login > a > i {
position: fixed!important;
top: 3px!important;
z-index: 9999!important;
left: 113px!important;
}

#cabecalho > div.conteiner > div.row-fluid.main-header > nav > ul > li.visible-phone {
position: fixed!important;
top: 3px!important;
z-index: 9999!important;
left: 60px!important;
}

#cabecalho > div.conteiner > div.row-fluid.main-header > div > h1 > a > img {
width:60%;
}

#cabecalho > div.conteiner > div.row-fluid.main-header > nav > ul > li.menu-carrinho {
left: 5px!important;
}
}

image
image547×766 56.7 KB

ou

@media screen and (max-width: 766px){
#cabecalho > div.conteiner > div.row-fluid.main-header > nav > ul > li.menu-login > a > i {
position: fixed!important;
top: 3px!important;
z-index: 9999!important;
left: 113px!important;
}

#cabecalho > div.conteiner > div.row-fluid.main-header > nav > ul > li.visible-phone {
position: fixed!important;
top: 3px!important;
z-index: 9999!important;
left: 60px!important;
}

#cabecalho > div.conteiner > div.row-fluid.main-header > div > h1 > a > img {
width:60%;
}

#cabecalho > div.conteiner > div.row-fluid.main-header > nav > ul > li.menu-carrinho {
left: 5px!important;
}

#cabecalho > div.conteiner > div.row-fluid.main-header > nav {
position: fixed!important;
top: -17px!important;
z-index: 9999!important;
left: 166px!important;
width: 50%;
}
}

image
image548×770 75.7 KB

3 curtidas
3

Paulo, você me salvou… Deu super certo.

Muito obrigada, mesmo.
Abraço
ótima semana.

1 curtida