Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Utilizar imagens diferentes para o menu transparente e com fundo branco

Oi, estou editando um site da empresa onde trabalho em cima de um template bem completo que compramos. A versão desse template que estou utilizando é de uma pagina só, e quando o site abre, o menu está TRANSPARENTE, somente com uma bordinha branca em baixo, pois atrás coloquei uma imagem. Mas quando rolamos o site pra baixo, o header se "solidifica" e fica branco, pra poder ser visivel nas outras partes do site. Automaticamente, os nomes das seções do menu, que estavam em branco, tornam-se escuros. O que eu gostaria de fazer é com que o logo mudasse. Enquanto o menu está transparente, o logo é a versão monocromática em branco (porque na pratica está aplicado sobre uma foto) e quando o menu ficar branco, gostaria de utilizar a versão dele em cores. Tenho todas as imagens do logo prontas e tudo o mais, e sei editar os códigos CSS, html... mas não sei criar. Procurei dentro do template que comprei alguma página que tivesse uma transição parecida, mas não encontrei nada pra copiar e alterar. Alguém saberia me ajudar?

4 respostas

Thiago, consegue colocar o projeto para rodar em algum host/servidor e disponibilizar o link por aqui? Acho que fica mais fácil te dar um help.

Abraço

Oi, consigo sim. Ja atualizei os arquivos que eu to editando. É no www.mbmarcondicionado.com.br

solução!

Thiago, uma forma fácil de fazer isso sem precisar mexer no JS é a seguinte:

Você vai definir uma classe para o logo default, .logo-lightpor exemplo... no html, incluir uma outra img abaixo da img do logo default e definir uma classe para o logo preto tb, .logo-dark.

Desta forma:

<img alt="MBM ar condicionado" height="50" src="img/logo-default-slim.png" class="logo-light">
<img alt="MBM ar condicionado" height="50" src="img/logo-dark-slim.png" class="logo-dark">

Por padrão, você deixará o .logo-dark oculto com o display:none;, quando o js ativa a classe .sticky-header-active, que é a responsável por aquele header, com esse CSS abaixo ela deve esconder o .logo-light e passar a exibir o .logo-dark.

Essas são as linhas de CSS que vc deve incluir no seu css/theme.css

.logo-dark {
    display:none;
}
html.sticky-header-active .logo-light {
    display:none;
}
html.sticky-header-active .logo-dark {
    display:block;
}

Não deve ser a melhor prática, mas assim você não vai precisar colocar a mão no .js

Me avisa se tudo certo?

Abraço

Perfeito, Thiago! Ficou bem certinho mesmo Muito obrigado pela ajuda! Já coloquei no servidor e testei hospedado também e ta ótimo.

Valeu! Abraços