• 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 recaptcha v3 en formulario de contactoAgregar recaptcha v3 en formulario de contacto
  • Cambiar logo version móvilCambiar el logo en la versión móvil de tu sitio Web
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

Insertar código fuente en WordPress usando Prism

Herramienta de Salud del Sitio en WordPress

Corregir error plugin desactualizado

Cómo usar la cache de objetos en WordPress

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