Si quieres conseguir una cabecera con logotipo de diferente color al hacer scroll con Elementor, lo puedes ver a modo de Demo en esta página, sigue leyendo.
Construcción de los elementos
Elabora dentro de un contenedor o sección general los siguientes contenedores y elementos.
Debes crear un contenedor por cada elemento, por ejemplo, en el contenedor del logotipo pondremos dos imágenes de tu logo una encima de la otra, la de arriba en el color que queremos que tenga cuando aún no se haya hecho scroll y el otra imagen la pondremos del color que queremos que se muestre una vez que se haya hecho scroll.
Vamos a hacer lo mismo duplicando menú de dos colores dentro del contenedor menú y de igual forma para los iconos de RRSS o cualquier otro elemento que tengamos.
Clases CSS en elementos que cambian de color
Bien, para conseguir una cabecera con logotipo de diferente color al hacer scroll con Elementor ahora haremos lo siguiente. A continuación debes llamar con clases de CSS diferentes a cada una de las partes que queremos que cambien de color al hacer scroll, en este ejemplo, logotipo, menú e iconos de RRSS, lo debemos hacer por duplicado.
Ejemplos:
- Imagen logo blanco: l-logo
- Imagen logo oscuro: d-logo
- Menu blanco: l-menu
- Menu oscuro: d-menu
- Iconos de RRSS blanco: l-rrss
- Iconos de RRSS oscuro: d-rrss
Código CSS para que se haga la magia
Para conseguir una cabecera con logotipo de diferente color al hacer scroll con Elementor, implementa este código CSS en cada uno de los contenedores de cada elemento que quieres que cambie de color.
/* OCULTAR EL LOGO OSCURO*/
.d-logo {
display: none;
}
/* CAMBIAR EL LOGO AL HACER SCROLL */
.elementor-sticky--effects .d-logo {
display: inline-block;
}
.elementor-sticky--effects .l-logo {
display: none;
}
/* CAMBIAR EL FONDO DEL MENU AL HACER SCROLL */
.elementor-sticky--effects {
background: #fff!important; /* editA aquí para cambiar el color de fondo de su encabezado adhesivo*/
}
/* CAMBIAR EL COLOR DEL TEXTO AL HACER SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a {
color: #333!important; /* edita aquí para cambiar el color del texto del encabezado fijo */
}
/* CONTROLA LA VELOCIDAD DE TRANSICIÓN: MANTENGA TODA LA MISMA VELOCIDAD PARA TENER UN EFECTO LIMPIO */
.elementor-sticky--effects .sticky-menu-items ul li a {
transition: .5s all ease-in-out;
}
.elementor-sticky--effects {
transition: .5s all ease-in-out;
}
/*actualizado cambiando el menú móvil y los enlaces del menú al pasar el cursor sobre el desplazamiento*/
/*cambiar el color al menú móvil alternar*/
.elementor-sticky--effects .sticky-menu-items i {
color: /*añade el color aquí*/!important;
}
/*agregar color al fondo del menu móvil*/
.elementor-sticky--effects .sticky-menu-items .elementor-menu-toggle {
background: /*agrega el color de fondo aquí o agregue transparente sin color de fondo*/!important;
}
/*CAMBIA EL ELEMENTO DEL MENÚ ACTIVO EN EL DESPLAZAMIENTO*/
.elementor-sticky--effects .sticky-menu-items ul li .elementor-item-active {
color: /*add your color here*/!important; /*edita aquí para cambiar el color del texto del elemento de menú activo para el encabezado fijo */
}
Descargable listo para importar
Para conseguir el descargable y tener todo en tu sitio, en segundos, contacta con nosotros.
Pulsa aquí
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!