Aprenda neste tutorial Elementor, como criar menu fixo no topo que muda cor com rolagem do site. Veja como criar um menu transparente com Elementor que ao rolar a página troca de cor e logo. Saber como criar um menu fixo com Elementor e que troca de cor e logotipo ao scrollar a página é um recurso muito legal para quem cria sites com o WordPress e Elementor. Pois deixa o layout do site muito bonito e com uma ótima usabilidade e experiência de usuário.
Quem cria sites com o WordPress, WooCommerce e Elementor, em determinado momento vai precisar saber como criar um menu fixo com efeito scroll. Ou seja, um menu que fica fixo no topo do site e muda de cor e logotipo na rolagem da página.
Este recurso fica muito bonito principalmente quando se tem um banner escuro e assim cria-se um menu transparente e fixo sobre o banner. Ao rolar/scrollar o site para baixo o menu fixo muda a cor de fundo, muda a cor dos itens de menu e também muda o logotipo para outra cor. O menu fixo também é conhecido como menu pegajoso, pois sempre está visível no site.
Para fazer este tutorial mostrei como exemplo o site de estrutura para infoprodutores que ensinei a criar no nosso canal do Youtube. Clique e veja como vai ficar.
Código CSS para fazer o Menu trocar de cor e logotipo:
#header.elementor-sticky--effects {
background-color: #fff;
transition: all .5s ease;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
#header.elementor-sticky--effects .logo img {
content:url('cole o link da sua logo aqui');
}
#header.elementor-sticky--effects .roblox li a {
color: red!important;
}Assista o vídeo abaixo e aprenda como criar o menu fixo e utilizar o CSS para ter um Menu que troca de cor e logo tipo na rolagem da página.
