Superponer el logotipo a la barra de menu principal

Tutorial divi. Superponer logo al menu principal

En el tutorial de hoy compartimos un pequeño fragmento de código CSS que hará que tu logotipo se superponga a la barra de menú principal. Verás lo fácil que va a ser conseguirlo. Te permitirá hacer una pequeña variación del estilo de tu menú principal predeterminado.

Este tutorial está basado en el de Eleganthemes que puedes consultar en su formato original aquí.

Configurar el Personalizador de temas

En primer lugar vamos al personalizador de temas, y ajustamos el estilo a su valor por defecto. Navega entonces hasta Divi > Personalizador de Temas > Cabecera y Navegación > estilo de la cabecera > Por defecto.

A continuación, establecemos la altura máxima del logotipo en 100. Divi > Personalizador de Temas > Cabecera y Navegación > Barra de menú principal > LOGO MAX ALTURA = 100.

Posiblemente te preguntas la razón de que hagamos esto si vamos a lograr el cambio con código CSS. En realidad este paso no es necesario, pero si por cualquier razón el código se deshabilita o no funciona (no suele ocurrir, pero no viene mal un plan B), el logo, aunque no se superpondría, se mostraría a un tamaño de altura máximo.

El código CSS personalizado

Añade el siguiente código a tu hoja de estilo hijo (si la usas). Si no usas hoja de estilo hijo, ve a las opciones de tema Divi> general> cuadro CSS personalizado (en la parte inferior de la página) e introduce el código siguiente:

@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}

¿Qué hace el código?

• Este código está usando píxeles en lugar de % porque cada uno vamos a usar un logo de tamaño diferente. Por lo tanto en términos generales nos vendrá mejor usar píxeles. De todas formas, experimenta si quieres modificando los píxeles por porcentaje.
• Las consultas de medios se utilizan para que el logotipo se superponga un poco menos en pantallas más pequeñas. Así  no es tan intrusivo. Si no quieres que el logotipo se superponga en los dispositivos móviles, puedes eliminar la primera consulta de medios. El logotipo tendrá entonces el aspecto predeterminado en el móvil y las tablets.
• ¿Por qué no usar altura en vez de min-altura? El uso de min-altura es lo que lo hace que el logo se vea fuera del ‘contenedor’. Que se superponga a la barra de menú, esto no se puede lograr sólo modificando la altura (ni siquiera con! Importante).

Resultado final

Y este es  el aspecto que debe mostrar tu logo sobre el menu una vez añadido el código CSS.

Como siempre te digo. Si te ha resultado útil. ¡Comparte, por favor!