Header Semitransparente con cambio de color al hacer scroll

CSS

Para configurar un header que es semitransparente al inicio colocamos el fondo transparente con un color global al 0.2 de opacidad desde el editor de estilos de elementor (el color y la opacidad depende del diseño) en capa de fondo, esta opcion es un pseudoelemento «::Before» de CSS asi que en codigo debemos asegurarnos de colocar el pseudoelemento.

para pintar el background del contenedor no es necesario el pseudoelemento ::before.

El CSS debe agregarse en el campo de «Custom CSS» del contenedor que tendra el efecto sticky.

 

/* le quita el color semi transparente */
selector.elementor-sticky--effects::before {
    background-color: transparent !important;
	}

/* Pinta el background con un color solido */	
selector.elementor-sticky--effects{
    background-color:#fff!important;
	}

/* transición del cambio de color */
selector{
    transition: background-color 1.3s ease !important;
	}
Kadir Kevin
Kadir Kevin

Últimos Posts