Cómo añadir sombra en la navegación fija de Divi cuando no hay

sombra4

Divi es un excelente tema para WordPress. Ha ganado muchísima fama y merecida, pero de vez en cuando uno va viendo que tiene algunos fallos. Como por ejemplo el que veremos a continuación: la sombra en la navegación fija de 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í.

Añadir sombra en la navegación fija de Divi

 

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:

Falta de sombra en la navegación fija de Divi

¿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.

Deja un comentario


He leído y acepto la política de privacidad