Gostaria de remover a barra de pesquisa flutuante da versão mobile, deixando apenas a lupa e o ícone do menu disponível na barra superior.
Está assim:
Gostaria que ficasse assim:
Olá!
Para configurações via código, sugiro que contrate um programador ou uma empresa da área para te auxiliar nas configurações. Lembrando que, nós não prestamos suporte para questões relacionadas a temas ou código de programação, pois trata-se de uma configuração externa a nossa plataforma.
Conheça nossos parceiros certificados.
Mas aqui na comunidade há vários usuários que possuem conhecimento, vamos manter o tópico aberto para eles te ajudarem!
1 curtida
Olá Rogerio!
Qual o link da sua loja?
Posso verificar aqui para você…
1 curtida
Bom dia!
selariacourosallas.com.br
click
click
<style>
@media screen and (max-width: 768px){
.icon-search-tool:before {
content: "\f002";
font-size: 28px;
color: #CB2F00;
}
#cabecalho .conteiner{
display: none;
}
}
</style>
<script type="text/javascript">
$(function(){
$(".vazia").prepend('<i class="icon-search-tool" style=""></i>');
$('.icon-search-tool').click(function(){
var x = $('#cabecalho .conteiner').attr("style");
if (x === "display: block")
$('#cabecalho .conteiner').attr("style", 'display: none');
else
$('#cabecalho .conteiner').attr("style", 'display: block');
});
});
</script>
2 curtidas
Show… Muito obrigado.
achei um bug aqui, se a pessoa ficar entre as duas resoluções (desktop e mobile) estou vendo… como acertar
1 curtida
Identifiquei o bug também nos exatos 767px de largura. Estou verificando tbm. Se eu descobrir alguma coisa, compartilho aqui.
<style>
@media screen and (max-width: 768px){
.icon-search-tool:before {
content: "\f002";
font-size: 28px;
color: #CB2F00;
}
.hidden-phone-tool {
display: none;
}
}
@media screen and (min-width: 768px){
.hidden-phone-tool {
display: block;
}
}
</style>
<script type="text/javascript">
$(function(){
$('#cabecalho .conteiner').addClass("hidden-phone-tool");
$(".vazia").prepend('<i class="icon-search-tool" style=""></i>');
$('.icon-search-tool').click(function(){
var x = $('#cabecalho .conteiner.hidden-phone-tool');
if (x.length){
$('#cabecalho .conteiner.hidden-phone-tool').removeClass("hidden-phone-tool");
console.log('x');
}
else {
$('#cabecalho .conteiner').addClass("hidden-phone-tool");
console.log('y');
}
});
});
</script>
3 curtidas
Leo, você me salvando de novo! rs
Esse código não funcionou pra retirar a minha barra de buscar flutuante.
O meu problema é literalmente o mesmo que o dono do post. Retirar a barra e colocar o menu de categorias em cima
Tentei colocar no CSS, no java e nada fez funcionar
o dele não usava tema, era código, pelo que vi… agora o seu e Tema… pode variar
@media screen and (max-width: 768px){
#cabecalho.fixed .conteiner
{
display:none;
}
}
Top Total:
Quando rola para baixo
Esse já resolveria grande parte do meu problema rs
Eu pensando melhor, acredito que problema no meu caso é o tamanho do logo, que ficou junto no conteiner da barra de busca (o logo está imenso) e olhando outras lojas para me espelhar (inclusive a lojadabruna, que por sinal, ficou linda! Parabéns!)
Acho que o ideal seria o meu logo ficar fixo na barra da home em um tamanho proporcional e quando descer a tela, a barra de home sumir, deixando a de pesquisar e o menu de categorias
Consigo fazer algo assim no meu tema?
realmente nao sei bem como fazer algumas modificações, mas sugiro contratar @brenonovelli ou @Ivan_Rabelo para fazer e testar tudo em todas as resoluções.
2 curtidas
Eu já fiz um ajuste parecido numa loja que usa o mesmo tema que vocês usam. Podem usar como referência. Eu não tenho como parar pra separar o código agora, mas com certeza alguém vai conseguir fazer isso.
Por aqui
3 curtidas
Oi, e como removo no formato pc?
1 curtida
talvez assim…
@media screen and (min-width: 768px){
#cabecalho.fixed .conteiner
{
display:none;
}
}
1 curtida