Como Criar um MENU FIXO que Muda de Cor e Logotipo ao Rolar a Página [Elementor]

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.