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;
}
