Tirando Dúvidas: Como MUDAR A COR DA LOGO E DO MENU ao rolar a página | Elementor

Nesse vídeo, eu tiro dúvidas sobre o tutorial que postei no canal: “Como MUDAR A COR DA LOGO E DO MENU ao rolar a página | Elementor”. Pois algumas pessoas ficaram com dúvidas e ainda não conseguiram mudar a cor da logo e também a cor do menu ao rolar(scrollar) páginas criadas com o Elementor.

Quem desenvolve sites com o WordPress, Elementor e Woocoomerce já deve ter criado menus fixos e transparente em layouts de sites que seriam necessário mudar e a cor do menu e de repente a cor do logotipo do cabeçalho também, ao rolar(scrollar/escrollar) a página/site, para que o menu fixo não misture com o layout do site e provocar uma experiência ruim ao usuário que navega no site.

Por exemplo: suponhamos que você tenha um menu fixo transparente que combine com seu lindo banner e sua cor de logo, mas na rolagem da página tanto a logo quanto os itens de menu, ficam misturando com o restante do layout do site. E isso não fica visualmente agradável. Neste caso, você precisará trocar a logo para um outra com uma cor diferente e também mudar a cor dos itens de menu ao scrollar a página.

Esse tutorial com o Elementor Page Builder eu enfatizo algumas configurações importantes que o desenvolvedor deve fazer para conseguir fazer o menu transparente e fixo que muda de cor e de logo ao escrolar/rolar o site.

/*Código CSS utilizado: */

div#top-bar-wrap {

display: none!important;

}

#header.elementor-sticky--effects {
background-color: #fff;
transition: all .5s ease;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
padding-top: 0px;
padding-bottom: 0px;
}

#header.elementor-sticky--effects .logo img {
content:url('coloque o link da sua logo aqui e não apague as aspas') !important;
}

#header.elementor-sticky--effects .roblox li a {
color: #ec8c08!important;
}

/*Codigo para funcionar no Firefox*/
#header.elementor-sticky--effects .logo:before {
    content:url('coloque o link da sua logo aqui e não apague as aspas') !important;
    position: absolute;
    left: 0;
    right: 0;
    }

#header.elementor-sticky--effects .logo img {
    opacity: 0;
    }

Comente o que achou:

Veja Mais

Artigos Relacionados:

Clique na imagem e use o Cupom: DESCOMPLICANDOSITES

Olá, visitante