Tutorial Divi: Hacer que el logo flote superpuesto sobre la cabecera y las secciones

El truco para Divi de hoy es muy sencillo. Haremos que el logo de nuestro sitio supere la zona de cabecera y flote sobre ella y las siguientes secciones, un efecto muy chulo y que se consigue en un par de minutos.

Lo primero es abrir el Personalizador de temas desde la portada de tu web e ir a la sección Cabecera y navegación -> Formato de cabecera para elegir el llamado Por defecto. También funciona en el formato Logotipo centrado en línea pero no queda tan bien.

A continuación ve a la sección Cabecera y Navegación -> Barra de menú principal y aumenta el tamaño del elemento Logo max altura a un valor de al menos 90.

Esto no es obligatorio en realidad pero quedará mejor, y no dará problemas el efecto en distintos tamaños de navegador, porque normalmente tenemos un valor muy pequeño al estar nuestro logo comprimido en la – escasa – altura de la cabecera, algo que vamos a solucionar hoy mismo.

A continuación ve a CSS adicional, o si lo prefieres al escritorio de WordPress Divi -> Opciones del tema y añádelo al fondo, en la sección de CSS personalizado, da lo mismo. Añade el siguiente código:

//Logo entre secciones
@media only screen and (max-width: 980px) {
#logo {
min-height: 80px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 150px;
}
}

Por supuesto, guarda todos los cambios.

¡Y ya está! Ahora tu bonito logotipo dejará de estar constreñido en la cabecera para flotar superpuesto libremente sobre tu contenido, pasando de algo como esto …

A esto otro …

Como podrás comprobar, el efecto quedará más lustroso si tu logo tiene formas y fondo transparente. Puedes ver el efecto aquí.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(11 votos, promedio: 4.5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

11 comentarios en “Tutorial Divi: Hacer que el logo flote superpuesto sobre la cabecera y las secciones”

  1. Andrea Mármora

    Hola Fernando, yo uso la opción logotipo centrado en linea y el problema que no puedo solucionar es que para determinadas ventanas emergentes (en el footer hay opciones de para «contribuir» con $) la sección superior queda por debajo del menú. No sé si podrás indicarme cómo solucionarlo? Gracias!!!
    andre

  2. Diana Martel Lacapria

    Hola Fernando, tengo problemas con el logo de una web construida bajo Divi y es que al redimensionarla para dispositivos móviles y tablets se ve muy pequeño el logo. La página es tsg.piedmont-co.com

  3. Gracias por tus tutoriales, son de gran ayuda.
    He visto que éste método no funciona cuando tenemos el menu de hamburguesa, es decir, cuando en formato de cabecera elegimos la última opción.
    Habría alguna opción para que la hamburguesa también flotara en la cabecera.
    De nuevo gracias, gran trabajo el tuyo.

  4. Hola!! Lo primero agradecer el artículo y por tanto el aporte. Estaba buscando precisamente com hacer esto que se explica en el artículo. Lo implementé enseguida 😀
    Se me planteó un problema / duda pasados unos días: En safari de mac va perfecto! pero en chrome y en firefox se ve el logo con la altura solicitada, pero muy estrecho (es decir deformado). En tablet, en safari de ios, visto en horizontal, carga mal pero si vas navegando por el menú, al volver a cualquier página entonces se ve correctamente.
    ¿a alguien más le pasa?
    El código lo he implementado tal cual con la opción Logotipo centrado en línea.
    (la versión ‘default’ funciona perfecto… pero necesito la del logo centrado 🙂 )
    Lo he probado con 1 sólo item de menú, con 2, con 3… y el resultado es siempre el mismo, por lo que descarto que el menú lo esté ‘empujando’.
    Gracias!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido