Me encanta hacer cosas pequeñas en Divi que resultan en grandes cambios en cuanto al diseño de una web, y aplicar transparencias (o niveles de opacidad) es una de estas pequeñas grandes cosas.
Hoy vamos a ver cómo hacer que la navegación fija sea semitransparente. O sea, que partiendo de un menú de navegación normal, con un fondo opaco, al hacer scroll en la página, ese menú de navegación, si está fijado, se convierta en semitransparente.
Índice de contenidos
Activar la navegación fija de Divi
Para conseguir este efecto lo primero que tienes que hacer es tener activa la navegación fija, y eso lo activas en los ajustes del tema Divi, en la administración de tu WordPress. En concreto en Divi -> Opciones del tema -> Barra de navegación fija.
Activa el selector y guarda los cambios. Ahora ya puedes personalizar la navegación fija.
Navegación fija semi transparente desde el personalizador de Divi
El modo sin código (nocode como se dice ahora) sería ir al personalizador de temas, desde el menú de Apariencia -> Personalizar.
Una vez ahí ve a la sección de Cabecera y navegación -> Ajustes de navegación fija.
En esta sección de ajustes despliega el elemento denominado COLOR DE FONDO DE MENÚ PRINCIPAL, donde verás 2 selectores de color.
El primero (izquierda) es para elegir el color principal, y el de la derecha, el segundo, es el de la transparencia a aplicar al color principal seleccionado previamente.
Mueve el selector y comprueba que tu barra de navegación fija se convierte en semitransparente al hacer scroll en la página que estés viendo.
Truco: También puedes hacer justo lo contrario, hacer transparente la barra de navegación principal y de color opaco la navegación fija, encontrarás los mismos controles en ambas secciones de ajuste.
Navegación fija semi transparente con CSS
Otra posibilidad es añadir un poco de código en la sección de CSS adicional del personalizador, de manera que se apliquen los cambios sin tener que tocar ni un solo ajuste del personalizador.
El código a añadir sería como este:
/* Color barra navegación principal Divi */
#main-header {background-color: rgba(255,255,255,1);}
/* Color de navegación fija Divi */
#main-header.et-fixed-header {background-color: rgba(255,255,255,0.5);}En este ejemplo hemos elegido el color blanco en rgba (255,255,255) y el 4º valor es el nivel de opacidad, que en la primera línea (barra navegación normal) está en 1 (totalmente opaco), sin embargo, en la línea de la navegación fija ponemos ese valor a 0.5, o sea, semi transparente.
Por supuesto, puedes cambiar los valores del color de fondo y de opacidad.
Truco: Igual que con el método
nocode, puedes hacer justo lo contrario, y aplicar semi transparencia a la navegación normal y opaca la navegación fija, simplemente cambiando el valor de opacidad en el código.
Te lo explico en un vídeo
Si prefieres ver cómo se hacen los dos métodos en un vídeo aquí lo tienes facilito y paso a paso…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
