Opa, eu tentei utilizar esse código, mas o rastreio aparece abaixo do rodapé bem bugado. Sabe oq pode ser?
Ajudaria muito o botão não ficar sobre as fotos.
Tomara que alguém saiba!
Manda o link das lojas junto das alterações pra gente ver.
Sim, fica bem na frente dos produtos. Outra coisa que eu acho interessante é a opção de escolher quantidade e adicionar direto no carrinho, de dentro da vitrine.
1 curtida
Pessoal, bom dia.
Alguém sabe como corrigir o problema do menu (versão mobile), vide foto anexo. o Texto das categorias e subcategorias, estão sobrepondo a página, atrapalhando a visibilidade.
nossa loja é enilahacessorios.com.br
agradeço antecipadamente pela ajuda.
PERFEITO LEONARDO!!! Funcionou!!! 
a propósito, você sabe como colocar o ícone do menu ao lado da casinha na versão mobile?, idem para o carrinho de compra 
1 curtida
Leonardo, desconfigurou o menu no desktop 
é possivel manter esta alteração somente no mobile?
É só colocar o código que ele informou dentro de um outro código, que restringe a alteração apenas para telas menores. O código ficará assim:
@media(max-width: 780px){
.menu.superior {
background: #ffffff;
z-index: 12;}
}
3 curtidas
OPA!! Arrumou 
só que agora deslocou outros itens da tela (carrinho por exemplo) 
a proposito @cleberandrade Cleber, sabe como colocar o menu la na barra superior (somente no mobile)? 
1 curtida
Está desconfigurado por causa de algum erro de digitação.
O seu código “extra” tem um excesso ou falta de “{” (chaves). Tem algum código que você sem querer deve ter esquecido de fechar as chaves {}. Contei 48 chaves abrindo e 49 chaves fechando. Dê uma olhada.
Oi @cleberandrade…contei tudo. A mesma quantidade de chaves abrindo é a mesma quantidade de chaves fechando…olha o CSS completo da minha loja:
@import url(‘https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap’);
.menu strong {
font-family: ‘Josefin Sans’, sans-serif !important;
}
#cabecalho, #cabecalho > div.conteiner{
background-color:#ffeee3;
}
#rodape, #rodape > div.conteiner{
background-color:#ffeee3;
}
.full.menu .nivel-um .titulo{
color:#222222;
}
.acoes-conta>li i {
background: transparent;
}
.icon-list:before {
font-size: 25px;
color: #222222;
padding-left: 0px;
text-align: right;
}
.icon-user:before {
font-size: 25px;
color: #222222;
text-align: right;
}
.menu.superior {
background: #ffffff;
}
.menu.superior .titulo {
color: #222222;
}
#cabecalho .conteiner .menu.superior .nivel-um li {
border:none !important;
}
.busca .botao-busca {
background: #222222;
border: none;
}
.busca {
background-color: none!important;
}
#cabecalho .busca { padding: 0; border: none; background: transparent; }
#cabecalho .busca input { padding: 10px 5px 10px 15px; border-radius: 50px; }
#cabecalho .busca .botao-busca { height: 42px; top: 0; right: 0; border-radius: 50px; border-top-left-radius: 0; border-bottom-left-radius: 0; width: 42px; font-size: 19px; }
.busca.borda-alpha {
background-color: transparent;
border: none;
}
.carrinho { border-radius: 50px; }
.carrinho>a i { border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
element.style {
}
#rodape .institucional .titulo {
color: #222222;
}
#rodape .institucional a, #rodape .institucional p {
color: #222222;
font-size: 14px;
font-weight: 400;
}
#rodape .redes-sociais{
font: none !important;
background: none !important;
box-shadow: none !important;
border:none !important
}
#rodape .institucional p {text-align: left;}
#cabecalho > .conteiner > .menu.superior { text-align: center; }
#cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block; border-left: 0; margin-right: -3px; }
#rodape .pagamento-selos {
background: none !important;
}
#rodape .institucional {
background: none !important;
}
#rodape .redes-sociais{
display:none !important;
}
#rodape .institucional p {text-align: justify;}
.secao-banners .conteiner {
max-width: 100%;
padding: 0;
margin:0;
margin-top: 10px;
border:none;
}
.menu.superior {width: 100%;position: absolute;top: 152px;left: 0px;}
.logo {margin-bottom: 70px;}
.tema-transparente .conteiner {
box-shadow: none;
}
.listagem .titulo-categoria {
text-align: center;
text-transform: uppercase;
}
.tarja {float:none;text-align:center;}
#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(2) > div > div.abas-custom > div {
background: #ffeee3;
border: transparent;
width: 100%;
}
.abas-custom .tab-content {
box-shadow: none;
}
.pagamento-selos .pagamento > ul {
text-align: center;
border: none;
vertical-align: middle;
}
#rodape .institucional {
display: none;
}
.menu .nivel-dois .com-filho i {
position: absolute;
right: 20px;
top: -3px;
border-radius: 10px;
background: transparent;
}
.menu li.com-filho>a i {
display: inline-block;
border-radius: 10px;
background: #ffffff;
color: #000000;
}
@media(max-width: 780px){
.menu.superior {
background: #ffffff;
z-index: 12;
top: 230px;
}
}
@media(max-width: 500px){
.conteudo-topo .busca-mobile .atalho-menu::before {
content: “Menu”;
font-weight: bold;
font-family: ‘Raleway’ ,sans-serif;
}
}
.busca {
margin: 0 80px 0 0;
}
.busca input {
box-sizing:border-box;
}
#cabecalho {
padding-top: 60px;
}
#cabecalho .menu.superior .nivel-um>li {
padding: 0;
width: 100%;
}
Alguém sabe como colocar duas colunas na vitrina na versão mobile ??
Pra colocar o menu na barra superior dá um trabalhinho a mais. Mas caso você seja curioso e gostar de mexer, a ideia é seguir os seguintes passos:
- Alinhar os elementos do menu, à esquerda, com o seguinte código:
.atalhos-mobile li { float: left !important; }
- Copiar o código html do menu (tag
<a>) e inserir VIA JAVASCRIPT antes (“before”) do botão da casinha, dentro de uma tag<li>(tag de lista)
$("#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li:nth-child(1)").before("<li><a href='javascript:;' class='atalho-menu visible-phone icon-th botao principal'> </a></li>");
O código javascript acima serve para adicionar html a qualquer lugar de seu template. De maneira genérica é assim:
$("ID").before("SEUCODIGOHTML")
Onde ID é o ID ou CLASSE do elemento onde você quer inserir ANTES, e sendo que SEUCODIGOHTML não pode ter nenhuma aspas dupla, apena aspas simples.
-
Ajustar o novo menu (tirar o fundo degradê, bordas e outros detalhes) (por sua conta rs)
-
Por fim, ocultar o menu que tá ao lado da caixa de pesquisa pra não ficar duplicado, com o seguinte código
#cabecalho > div.conteiner > div > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span8.busca-mobile > a {display:none !important}
OBS.: CUIDADO, os códigos que postei não estão completamente ajustados pro seu site. É para ter uma ideia. Você pode copiar e colar mas depois faça os ajustes necessários. Sempre faça um backup antes de experimentar códigos novos.
2 curtidas
Pra isso, teve o bruno que ajudou bastante, e saca muito disso! Ele me ajudou nessa questão.
2 curtidas
Show de bola. Novamente obrigado pela atenção e disposição em nos ajudar!!! @cleberandrade
1 curtida
O video é longo, mas parece bastante interessante. vou assistir. Obrigado pela atenção. @baby_charme
Olha o tópico todo, que tem a opção de entrar no site dele, e seguir o passo a passo pra instalar em seu site. é muito facil, caso não queria ver o video. O video, ele gravou pra quem tem interesse em aprender, e se familiarizar mais com códigos CSS, ver como é processo.
Mas, pode somente seguir o passo a passo, que dá super certo!
O meu deu certo!
2 curtidas
@cleberandrade @Leonardo_Vicentini_F @Ivanilson_Gomes @Expert_LI!
Pessoal, bom dia! espero que esteja tudo bem com vocês. Sabem de algum CSS (que efetivamente funcione) para alterar o ícone do carrinho?
Em tempo, gostaria de apoio para deixar os ícones/menus (conforme menu da loja use jeans) anexo, ou parecido…agradeceria muito caso alguem possa se dispor em ajudar. Abraços e ótima semana.
Sem título1|850x148
