Colocar a logo na barra flutuante da versão mobile e barra de pesquisa também

Layout
1

Gostaria de colocar a logo na barra flutuante na versão mobile e o campo de pesquisa. Do jeito que está nesta loja que vir aqui na comunidade. Exemplo na imagem.

image

Minha loja é https://www.pointdistribuidora.com.br

Se alguém tem o código por favor compartilhar aí conosco :wink:.

Obrigada pela atenção. Uma boa tarde, boa noite ou bom dia ! Enfim quem puder me ajuda ficarei grato.

2

Sua logo é muito grande, sugiro deixar somente a pesquisa.

<style>
@media (max-width: 767px){
	.fixo-mobile {
		position: fixed;
		z-index: 100;
		top: 50px;
		left: 0;
		background: white;
	}
}
</style>

<script>
var ct = $('#cabecalho > .conteiner > div > .conteudo-topo');
window.addEventListener("scroll", function () {
	if (window.outerWidth <= 767 && window.scrollY >= 100) {
		if (!ct.hasClass('fixo-mobile')) ct.addClass('fixo-mobile');
	} else {
		if (ct.hasClass('fixo-mobile')) ct.removeClass('fixo-mobile');
	}
});
</script>

image
image578×865 101 KB

1 curtida
3

Eu vou colocar uma logo mais pequena

4

@Leonardo_Vicentini_F teria como adicionar uma imagem diferente da logo mais pequena a barra flutuante ao rolar para baixo?

5

talvez consiga, mas não tenho ideia de como fazer.

6

Alterando a logo por menor e possível, desculpa tá fazendo muitas perguntas. Mais é porque não entendi um pouco a baixo de nada. Mais de qualquer forma obrigado pela ajuda @Leonardo_Vicentini_F ficou top este seu código.

7

pode ser só esse então

@media only screen and (max-width: 767px){
    .pagina-pagina-inicial .conteiner-principal #cabecalho .conteiner,
    .pagina-busca .conteiner-principal #cabecalho .conteiner,
	.pagina-carrinho .conteiner-principal #cabecalho .conteiner,
	.pagina-produto .conteiner-principal #cabecalho .conteiner 
    {
        position: fixed;
        width: 100%;
        z-index: 15;
        background: #00a3ff;
    }
    
    .conteiner-principal  .secao-banners {
        margin-top:180px;
    }

    .pagina-busca #corpo,
	.pagina-carrinho #corpo,
	.pagina-produto #corpo 
	{
        margin-top:180px;
    }
}
8

Pronto, remover ja se de certo eu coloco uma logo menor

9

ddddd
ddddd720×1600 104 KB

@Leonardo_Vicentini_F Boa Tarde Leonardo, tudo bem? Tentei colocar esse código no meu, mas não deu certo. Poderia me ajudar?

10

Possivelmente, este código não é compatível com o seu tema.