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

MENU FIXO que Muda de Cor e Logotipo

Esta gostando? Compartilhe

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email

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.

Inscreva-se no canal:

Comente o que achou:

Aproveite e veja também:

Olá, visitante

Olá, visitante