Boa tarde galerinha expert, estou querendo adicionar a barra flutuante que surge ao descer no site, o menu, onde mesmo la no meio do site o meu cliente possa acessar o menu pela barra.
Testei esse codigo Código menu flutuante na rolagem de pagina, para quem esta començando
porém ele remove tudo da barra, e queria deixar a barra como esta e só adicionar o menu a ela.
exemplo queria que ficasse assim, até o menu normal sem esta na barra flutuante
OBs. tanto para Desktop quanto para Mobile.
Olá ModificMoveis, tudo bem?
Em relação ao Mobile, tem alguma padronização semelhante?
Posso estudar uma solução
pra ser sincero ainda nem pensei no mobile, mais seria interessante mesmo padrão.
Olá ModificMoveis,
Eu recomendaria fazer um checklist, das principais modificações que precisa, para buscar uma solução assertiva, para evitar pesar a loja com partes de códigos de terceiros.
Observação: O Mobile hoje em dia, tem maior percentual de vendas/visitas, vale a pena pensar com carinho nesse ponto.
Será que alguem consegue me ajuda???
Olá!!
Esse código do exemplo está sobrescrevendo a barra flutuante inteira, tenta adicionar uma nova linha:
CSS:
/* Esse estilo já existe na sua linha 74 (Visual > Editar CSS), pode apenas alterar o valor */
#barraTopo {
height: auto;
}
JS:
if(window.innerWidth >= 768) {
$('#barraTopo .conteiner').append('<div class="row-fluid"><div class="span12">' + $('#cabecalho .menu').prop('outerHTML') + '</div></div>');
}
Espero ter ajudado, até mais!!
no mobile ele não fixou o menu será que tem como?
Para o Mobile, seria necessário criar um Script específico, adicionando um botão em cima e ao clique desse botão, exibir o menu logo após a barra flutuante, ficaria algo parecido com isso:
Caso queira, posso desenvolver esse Script posteriormente.
se não fosse te incomodar tanto eu ficaria muito grato se pudesse faze-lo!.
Olá!!
Desenvolvi o código do Mobile:
CSS:
@media (max-width: 767px) {
.menu.superior.menu-mobile--open {
position: fixed;
left: 0;
top: 52px;
background-color: #fff;
z-index: 99;
}
.menu.superior.menu-mobile--open .nivel-um {
display: block;
}
}
JS:
if(window.innerWidth < 768) {
$('#cabecalho .atalhos-mobile .vazia').html('<a class="menu-mobile__button icon-th"></a>').removeClass('vazia').addClass('fundo-principal');
$('.menu-mobile__button').click(function(event) {
event.preventDefault();
$('#cabecalho .conteudo-topo .menu').toggleClass('menu-mobile--open');
});
}
Espero ter ajudado, até mais.
Obrigado cara, vou testar, só 1 coisa srsr, a pagina de marca, desalinhada, teria como dar um help
https://www.evimero.com.br/marca/pandin.html
É que aquele CSS que eu te passei em um outro tópico, não está dentro dessa página. Minha recomendação é, ao invés de incluí-lo no painel pelo ‘Visual > Incluir código HTML’, colocá-lo no ‘Visual > Editar CSS’. Outra opção seria alterar a ‘Página publicação’ do HTML para ‘Todas as páginas’ ao invés da ‘Página inicial - Home’.
então, mais quando eu coloquei ele no css direto ele bugou a pagina de categorias, ai eu fiz oq coloquei 1 pra paginas de categorias com quantidade de itens diferente da Home, se eu por ele no css, direto, e deixar o da pagina de categorias, será que ele vai pegar qual css?
Então, mas se for só por causa da quantidade de itens, pode-se utilizar um seletor mais específico, para definir qual é a página.
Exemplo:
/* Geral (Padrão) */
#listagemProdutos .listagem-linha > ul {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Home */
.pagina-inicial #listagemProdutos .listagem-linha > ul {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Categoria */
.pagina-categoria #listagemProdutos .listagem-linha > ul {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
show de bola, vou refazer então, vlw
Só me da uma ideia se é possível claro srsr.
quero o menu mobile, estilo Accordion será q é possivel?
Acredito que sim, mas acessando sua loja, creio que foi adicionado um código que está impedindo a visualização do Menu no Mobile, remova esses estilos adicionados, que eu consigo elaborar algum Script. Peço também, que crie um novo tópico com essa solicitação para que outros lojistas encontrem essa implementação de modo fácil.
Opa, removi um script que tinha que peguei aqui no fórum, de um menu mobile, removi o script e css. (Novo menu mobile lateral - #15 por Carol_Guimaraes)
Caso falte algo me avisa que remoto.
testei o codigo deu certo porém uma duvida.
A primeira vez que abro a pagina no mobile o menu aparec eem baixo do lado do campod e busca.
Pode fazer um teste? Evolve o código nesse evento que é disparado quando a estrutura foi totalmente carregada:
$(document).ready(function() {
$('#cabecalho .atalhos-mobile .vazia').html('<a class="menu-mobile__button icon-th"></a>').removeClass('vazia').addClass('fundo-principal');
$('.menu-mobile__button').click(function(event) {
event.preventDefault();
$('#cabecalho .conteudo-topo .menu').toggleClass('menu-mobile--open');
});
});
ele esta assim ja
$(document).ready(function(){
if(window.innerWidth < 768) {
$('#cabecalho .atalhos-mobile .vazia').html('<a class="menu-mobile__button icon-th"></a>').removeClass('vazia').addClass('fundo-principal');
$('.menu-mobile__button').click(function(event) {
event.preventDefault();
$('#cabecalho .conteudo-topo .menu').toggleClass('menu-mobile--open');
});
}
});
é para tirar a checagem da resolução?