Como fazer a subcategoria aparecer na versão mobile? Alguém sabe como fazer isso? Quando clico na categoria , aparece as subcategorias no menu na versão mobile
1 curtida
Vânia, me parece ser um bug, porque em alguns momentos o menu aparece, em outros não. Acho que é possível criar um código para garantir que o menu sempre apareça na versão mobile. Vou fazer alguns testes por aqui.
no computador aparece normal, no celular , só aparecem as categorias no menu lateral, eu queria que quando clicasse na categoria, aparecessem as subcategorias ali mesmo no menu lateral
1 curtida
então, ali em paletas de sombras , tem uma subcategoria , e depois uma 3 categoria ;
e no pó tbm, tem mais 2 categorias abaixo da categoria pó, eu queria que quando clicasse em paleta de sombras, abrisse a categoria abaixo dela, e assim por diante. Mas que abrisse a categoria ai no menu mesmo, antes de direcionar pro link, é possível?
deixa eu tentar explicar melhor ( to me enrolando, rsrsr, desculpa)
Por exemplo: ao abrir o menu lateral , aparecer assim:
- Paletas de sombra (categoria)
–Ruby rose (subcategoria 1)
—Adventures matte (subcategoria 2)
—The peach Cream (subcategoria 2)
aí a pessoa teria a opção de escolher clicar pela marca ruby rose, ou escolher especificamente o modelo adventures matte ou peach cream por exemplo
Entendi. Então nesse caso precisaria usar um código mesmo, a não ser que o seu tema já tenha como ativar essa opção. Eu vi que você usa o Alpha Theme, você chegou a dar uma olhada no manual deles? Às vezes eles já ensinam como ativar essa opção por lá.
1 curtida
eu olhei sim, não tem essa opção 
Então o jeito é via código mesmo. Acho que eu já vi um tópico antigo pedindo a mesma coisa. Vou ver se encontro ele.
1 curtida
obrigado pela disposição em ajudar, Deus te recompense!
Bom dia Vânia. Consegui encontrar um código que pode servir para o seu menu. Mas ele é uma gambiarra, então se você criar uma nova subcategoria, esse código não vai conseguir exibir ela.
$(document).ready(function() {
$('#menu_paletadesombras').append(`
<ul style="display: contents;">
<li style="padding-left: 30px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/ruby-rose-the-peach-cream" title="Ruby Rose">
- Ruby Rose
</a>
</li>
<ul style="display: contents;">
<li class="categoria-id-8111049" style="padding-left: 40px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/adventures-matte" title="Adventures Matte">
- Adventures Matte
</a>
</li>
<li class="categoria-id-8111035" style="padding-left: 40px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/the-peach-cream" title="The Peach Cream">
- The Peach Cream
</a>
</li>
</ul>
</ul>
`);
$('#menu_po').append(`
<ul style="display: contents;">
<li style="padding-left: 30px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/dailus" title="Dailus">
- Dailus
</a>
</li>
<ul style="display: contents;">
<li class="categoria-id-8111221" style="padding-left: 40px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/po-compacto" title="Pó compacto">
- Pó compacto
</a>
</li>
<li class="categoria-id-8111223" style="padding-left: 40px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/po-iluminador" title="Pó iluminador">
- Pó iluminador
</a>
</li>
</ul>
<ul style="display: contents;">
<li style="padding-left: 30px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/ruby-rose" title="Ruby Rose">
- Ruby Rose
</a>
</li>
<ul style="display: contents;">
<li class="categoria-id-8111262" style="padding-left: 40px;">
<a href="https://vaniamakeupstore.lojaintegrada.com.br/po-solto--" title="Pó solto">
- Pó solto
</a>
</li>
</ul>
`);
});
Esse código você precisa salvar como JavaScript e inserir no rodapé. Mas como eu falei ele não é o ideal, é só uma gambiarra que vai servir para agora.
E para esse menu não aparecer no desktop, você acrescenta esse código CSS:
@media (min-width: 767px) {
#menu_paletadesombras > ul:nth-child(3),
#menu_po > ul:nth-child(3) {
display: none !important;
}
}
2 curtidas
Oi Jose boa tarde, nossa, muito obrigada! Deus abençoe e retribua!
mas ai depois, não é só copiar e colar, e acrescentar a nova categoria?
Sim, essa é uma solução. Mas o ideal seria criar um código que sozinho iria identificar todas as subcategorias e iria atualizar as informações sem você precisar ir atualizando tudo na mão.
1 curtida
entendi!, mas muito obrigado! resolveu meu problema!, já adicionei e funcionou perfeitamente!!
Que Deus continue te dando sabedoria!!
1 curtida
Olá Jose , tudo bem?
eu entrei no meu site agora pelo computador, apareceu as subcategorias, vc poderia me ajudar a resolver??
olha como tá aparecendo!
Vânia, na linha 40 do seu CSS, tem uma } extra. Você precisa apagar ela.
Ela está logo abaixo desse código:
#cabecalho .atalhos-mobile ul li.menu-button {
display: flex;
align-items: center;
justify-content: center;
background: #ff4a8a;
width: 40px;
height: 40px;
margin-bottom: 10px;
box-shadow: 0 3px 9px -2px rgba(255, 74, 138, .75);
border-radius: 6px;
}
1 curtida
eu acho que foi depois que adicionei esse código no css, para deixa o botão rosa
#cabecalho .atalhos-mobile ul li.menu-button {
display: flex;
align-items: center;
justify-content: center;
background: #ff4a8a;
width: 40px;
height: 40px;
margin-bottom: 10px;
box-shadow: 0 3px 9px -2px rgba(255, 74, 138, .75);
border-radius: 6px;
}
apagar as duas? aquela ali no meio que ta selecionada?
Só uma delas. Não importa qual, o importante é não deixar assim, duas chaves de fechamento na sequência.
2 curtidas