Cambiar el logo en cabecera fija en un tema WordPress

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 hay que cambiar URL_DEL_NUEVO_LOGO por la url absoluta del nuevo logo

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.

Suscríbete a DecodeCMS:  

 

La entrada Cambiar el logo en cabecera fija en un tema WordPress es un artículo reciente del sitio DecodeCMS.