Llevo tiempo queriendo realizar esta modificación. Se trata del cambiar en Divi el color del botón del menú superior que se suele llamar menú hamburguesa en los dispositivos móviles. Esas tres rallitas que tiene el botón desplegable del menú superior de Divi son las que veremos cómo cambiar de color para ajustarlo a nuestro diseño web realizado en WordPress.

También te puede interesar:
🏅¿Qué es Divi? Guía de Divi Theme para WordPress
Divi Marketplace - La tienda online de Divi
Tengo Divi sin licencia. ¿Cómo la instalo?
Divi Essential - La extensión más completa de Divi

Menú hamburguesa de Divi

El menú hamburguesa de Divi es el que aparece cuando accedes a tu web con el móvil o una tablet. En la siguiente captura lo he marcado con el ratón para que veáis a qué me refiero. Son las rallitas que aparecen en interior del botón y que apenas son visibles con los colores que elegí para el blog.

El problema que hay con el Builder de Divi es que no permite seleccionar el color de este elemento. Como se ve en la captura, solo podemos personalizar el color del texto y el del fondo pero no el de las rallitas. Vamos  a ver cómo lo he solucionado.

Personalizar el color del botón desplegable del menú superior de Divi 01

Cambiar el color del menú de Divi en dispositivos móviles

Como vemos en la imagen, he utilizado Firebug para inspeccionar los elementos del menú y averiguar la clase de la hoja de estilos CSS para poder modificarle el color. Si realizamos el cambio en vivo, vemos que hemos dado con el elemento concreto que buscaba.

Personalizar el color del botón desplegable del menú superior de Divi 02

Ahora solo queda implementar los cambios en la hoja de estilos de mi Divi Child Theme para que el cambio sea permanente y no se pierda cuando actualice mi tema Divi.

/* Personalizar el color del botón desplegable del menú superior */
span.mobile_menu_bar.mobile_menu_bar_toggle::before {
color: white;
}

Conclusiones

Divi es un page builder muy potente, pero en algunas ocasiones nos encontraremos con casos que no podemos resolver directamente con Divi y que tendremos que tirar de diseño en CSS. Por eso es bueno siempre tener unos conocimientos mínimos sobre diseño web en HTML y CSS para poder así realizar cualquier personalización que necesitemos de nuestra web.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies