• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Cambiar el logo en cabecera fija en un tema WordPress

Cambiar el logo en cabecera fija en un tema WordPress

Cambiar el logo en cabecera fija en un tema WordPress

[ 31 agosto 2021 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css imagen

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Resultado final cambio logo cabecera fija

 

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:

Resultado final logo color blanco

 

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:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Redes sociales en la cabecera WordPressAgregar redes sociales en la cabecera de WordPress
  • Cabecera Fija Theme WordPressCabecera fija en theme WordPress
  • Agregar ubicación de menú WordPressAñadir una nueva ubicación de menú a un theme WordPress
  • SVG animado en WordPressInsertar un logo SVG animado en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cambiar el tipo de Custom Post Type en WordPress

Shortcode para búsqueda en tabla personalizada en WordPress

Botones para el campo de cantidad en WooCommerce

¿Se puede evitar el efecto Lock-in en WordPress?

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados