¿No sabes qué significa algún término? Consulta el glosario
Cómo añadir sombra en la navegación fija de Divi cuando no hay
En Divi, por defecto, los colores de fondo de la barra de menú principal y de la navegación fija (o sea, que cuando hacemos scroll con el ratón la barra de menú principal queda visible y no se esconde) son opacos y al bajar con el ratón la navegación fija parece que esté por encima del contenido principal gracias a una pequeña sombra, tal y como vemos aquí.
El problema
El problema aparece cuando o bien la barra de menú principal o bien la navegación fija tienen transparencia, da igual el grado. Entonces, nos podemos encontrar con lo siguiente:
¿Dónde está la divisón entre la barra de menú principal y el contenido? Especialmente cuando los dos colores de fondo son el mismo, no es posible distinguirlo. Aquí entonces estaría bien tener la sombra que tiene la navegación fija cuando no hay transparencias.
¿Cómo solucionarlo?
Fácil, añadiendo la sombra mediante CSS.
Vamos a nuestro panel de control de WordPress y entramos al menú Divi -> Opciones del tema. Luego, en la primera ventana que se abre, que será la pestaña General, abajo del todo añadimos el siguiente código, dentro de la casilla CSS personalizado:
#main-header.et-fixed-header {
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
}Listo, guardamos y ya veremos la sombra al hacer scroll tal y como véis en este sitio web. La barra de menú principal es 100% transparente pero la navegación fija es 100% opaca. Aún así vemos la sombra en la navegación fija de Divi.
En esta entrada pueden haber enlaces de afiliado a productos y servicios en los que a veces podrás obtener descuentos si compras algo, y yo, como autor de la entrada, una pequeña comisión. No te preocupes, nunca pagarás de más y nunca verás enlaces de afiliados de algo que yo mismo no utilice o recomiende.
