¿Te has topado alguna vez que las líneas del menú de hamburguesa se pierden en el fondo de tu menú en Divi? El problema está que en el personalizador del tema no aparece la opción 🙁 
Me vi en la necesidad de aplicar un poco de CSS para solventar este dilema 😀  

Este era mi problema:
Hice un menú el cual debía ser transparente en todo el sitio, entonces hice estos ajustes:


Bonito y todo, pero tenía un serio problema en móvil:

Quiero un fondo blanco.
¡Carajo! Se perdió mi logo y sólo quiero blanco el Dropdown… 
También quiero en blanco las líneas del menú y las letras de “Select page”
Pero si lo hago todo el texto, incluido el del  dropdown aparecerá en blanco y se perderá en el fondo blanco 🙁


Bueno, entonces como ya dí con mi problema, ahora toca encontrar la solución y todo está en los siguientes códigos CSS:

Primero: necesito que sea todo transparente y que sólo el dropdown sea con fondo blanco.

Hacemos que el menú para móvil sea transparente y aplicamos el siguiente código CSS



/*CSS para fonde del menú móvil */
#main-header .et_mobile_menu {
background-color:#ffffff !important;
}

El resultado de ese código es este:

¡Ya está! Ya tengo la primera parte, ahora toca: “Líneas de las líneas de hamburguesa, “select page” y la línea separador del dropdown.


Seguimos con códigos CSS:

/* Color de las líneas de hamburguesa */

span.mobile_menu_bar:before{
color:#ffffff;
}

/* Color de "select page"*/

span.select_page {
color:#ffffff !important;
}

/* Color de línea inferior del menú móbil*/

.et_mobile_menu {
border-top: 3px solid #000000; 
}  

Y tenemos como resultado esto:

Es justo lo que quería 😍😍😍

Para facilitar la lectura del código, he agregado la descripción de que es cada código así puedes escoger el que necesites <3 
Lo único que debes hacer es cambiar el color de cada item. Estos códigos los puedes agregar desde Personalización –> CSS adicional o bien, en Divi –> CSS personalizado. En los dos lados aparecerá 😉

¡Ojo! No es necesario que lo agregues de los dos lados, sólo en uno.

Espero este pequeño tutorial haya sido de ayuda o  que pueda servirte en futuros proyectos.

¡Hasta la próxima!

¿Te parece interesante este artículo?
Puntaje
[Total: 0 Average: 0]

Mi nombre es Carlos Tum, originario de Guatemala. Soy un emprendedor que inició una pequeña empresa llamada Grupo Digit con base al diseño web, publicidad digital y branding. He trabajado con WordPress y Divi desde el inicio de mi empresa. Un placer.

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares