Alteração do Menu da loja no Mobile

Layout
1

Bom dia, gostaria de alterar o menu da minha loja na versão mobile, para ele ja aparecer no centro da página exibindo as categorias, igual esse site por exemplo

WhatsApp Image 2023-07-26 at 12.01.27
WhatsApp Image 2023-07-26 at 12.01.27900×1600 113 KB

https://www.elegancecamisas.com.br/
@Leonardo_Vicentini_F

2

Inserir HTML

<style>
.menu-superior-centro{
    display: none;
}
@media only screen and (max-width: 767px){
    .menu-superior-centro{
        display: block;
    }
    .menu-superior-centro strong, 
    .menu-superior-centro a {
        color: white;
        font-size: 20px;
        line-height: 30px;
    }
    .menu-superior-centro li {
        text-align: center;
        
    }
    .menu-superior-centro ul {
        margin: 0;
    }
}
</style>
<script>
$(function(){
    $('.secao-banners').append($("#cabecalho > div.conteiner > div > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span8.busca-mobile > div.menu.superior").clone().attr("class", "menu-superior-centro"));
})
</script>

image
image606×844 64.9 KB

3

Ficou excelente, era exatamente o q eu queria, mas só mais uma coisinha, se eu quiser q as abas de categorias venham fechadas, pra exibir apenas as categoria e não as subcategorias teria como?
Pq quando eu adicionar mais categorias vai ficar muita coisa
Muito obrigado!

4

ai vai precisar de uma programação mais avançada…

5

Esse está mais completo.

<style>
.menu-superior-centro{
    display: none;
}
@media only screen and (max-width: 767px){
    .menu-superior-centro{
        display: block;
    }
    .menu-superior-centro strong, 
    .menu-superior-centro a {
        color: white;
        font-size: 20px;
        line-height: 30px;
    }
    .menu-superior-centro li {
        text-align: center;
        
    }
    .menu-superior-centro ul {
        margin: 0;
    }
.menu-superior-centro li.com-filho > ul {
    display:none;
}
.menu-superior-centro a {
    text-decoration: none;
}
}
</style>
<script>
$(function(){
    $('.secao-banners').append($("#cabecalho > div.conteiner > div > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span8.busca-mobile > div.menu.superior").clone().attr("class", "menu-superior-centro"));
$("div.menu-superior-centro  li.com-filho > a > i").click(function(e){
    (($(this).parent()).next()).toggle();
    e.stopPropagation();
    e.preventDefault();
})
})
</script>

image

3 curtidas
6

Ficou exatamente como eu queria, muito obrigado amigo!

1 curtida
7

Teria como eu colocar uma imagem na pagina do produto entre o calculo de frete e a descrição? seria a mesma imagem para todos os produtos e apenas no mobile

1 curtida
8

sim, teria como, não vejo problema em fazer um script para isso, podemos trocar um ideia no particular para esse trabalho ou vc definir melhor o que precisa para eu gerar o código.

1 curtida