Algunos temas WordPress tienen la característica de tener una cabecera fija cuando se hace scroll, sin embargo muchas veces esta cabecera tiene un espacio más reducido o incluso puede cambiar el color de fondo, debido a esto es posible que el diseño de tu logo se vea afectado.
Resultado final
Al final lo que necesitamos es cambiar el logo cuando se hace scroll, tal como se muestra en la siguiente animación:
Código para cambiar el logo
Los temas usualmente crean una clase CSS dinámicamente para la cabecera cuando esta esta fija, nos basaremos en esa clase CSS para hacer el cambio del logo.
Por ejemplo suponiendo que la clase CSS para la cabecera será .fixed y que la imagen del logo tiene una clase .logo, entonces el código para hacer el cambio de imagen será:
header.fixed .logo {
background-image: url(URL_DEL_NUEVO_LOGO);
background-size: contain;
background-repeat: no-repeat;
padding: 20px;
width: 0;
height: 0;
}En el código anterior:
- Definimos una imagen de fondo para la imagen HTML
- La imagen HTML no será visible porque estableceremos el ancho y alto a cero
- Para mostrar la imagen de fondo establecemos un padding
- Complementamos con otras propiedades como background-size y background-repeat
Cambiar logo a color blanco
En algunos casos posiblemente lo único que necesitas es cambiar el color del logo a color blanco, para estos puedes usar el un código similar al siguiente código CSS:
header.fixed .logo {
filter: brightness(0) invert(1);
}
En el código anterior, establecemos un filtro CSS que convierte los colores del logo a color blanco. Verás que ahora el logo lucirá similar a lo que se muestra en la siguiente imagen:
Conclusión
Como has podido comprobar, si tu tema no tiene la opción de cambiar de logo cuando tienes la funcionalidad de fijar la cabecera, tal como has podido comprobar puedes cambiar el logo o cambiar sólo su color de manera simple a través de código CSS.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...