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
Tabla de contenidos
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.
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.
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.
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
hola quisiera saber como le cambias el nombre al boton submit del formulario
y poder ponerle "Enviar"
Hola Iván. A qué formulario te refieres? En este artículo solo hablo del menú superior. Un saludo.
como puedo colocar varios videos en un tutorial, los video se ven muy grandes y los otros muy pequeno. Me puedes ayudar?
ayer compre Divi.
Hola Roxana. Yo suelo poner vídeos de youtube, y se hace pegando la url directamente en el texto del artículo. Normalmente te cogen el ancho completo de la página. Si estás diseñando una página con 2 columnas de modulos de texto podrás añadir los videos como si fuera una galería. Un saludo.
Hola me gustaría saber si puedo cambiar el icono
No lo he mirado, pero puede que no sea un icono y esté hecho con CSS. Un saludo.
Javier, me ahorraste mucho tiempo , estaba ya por cambiar todo por ese detalle, muy buen aporte, al menos a mi me sirve, gracias y un abrazo desde Lima
Me alegro que te haya servido. Pero no dejes que eso te haga cambiar de tema. Yo todavía tengo problemas de diseño con ese botón y por eso no debo cambiar todo el resto del diseño. Hay cosas más importantes que esos pequeños detalles. Un saludo!
buenas Javier, la verdad es que tu hilo es justo el problemilla que yo tengo, no sé si a raíz de buscar como hacerlo o que, ahora en el móvil si se me ve, pero en la versión de escritorio sigue sin verse. Mucha gracias 😉
Puede que sea tema de caché. Prueba a entrar en modo incógnito a ver si se ve bien. Un saludo.