Remover menu flutuante mobile

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

image

click

image

click

image

<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