El icono hamburguesa, ese pequeño símbolo de tres líneas que aparece en los menús móviles, es una parte esencial de cualquier sitio web responsive. En Divi, este icono se genera automáticamente al reducirse la pantalla, pero muchas veces no se adapta al diseño o los colores de la web. Por eso, en este artículo se explica cómo cambiar el color del menú hamburguesa en Divi de forma sencilla, tanto desde el personalizador como con CSS personalizado. Además, si buscas ir un paso más allá en la personalización, puedes utilizar el módulo Menú Personalizado para Divi, que permite modificar iconos, imágenes y estilos fácilmente sin necesidad de tocar código.
Contenidos
¿Qué es el icono hamburguesa en Divi?
El icono hamburguesa en Divi es el elemento visual que permite desplegar y ocultar el menú en dispositivos móviles o pantallas pequeñas. Su diseño predeterminado es minimalista y su color suele depender de la configuración global del encabezado. Sin embargo, este icono no siempre se adapta a los fondos o estilos personalizados, lo que puede afectar la usabilidad y el diseño general del sitio.
Modificar su color puede parecer una tarea menor, pero tiene un impacto directo en la experiencia del usuario móvil. Un contraste visual adecuado mejora la visibilidad del menú y transmite coherencia estética con el resto del sitio.
Con herramientas como el Menú Personalizado para Divi, puedes incluso sustituir el icono hamburguesa por una imagen propia o un icono más acorde con tu marca, lo que mejora notablemente el diseño final.
Cómo cambiar el color del menú hamburguesa en Divi, métodos:
Desde el personalizador de temas
Divi permite modificar el color del menú desde el Personalizador de temas (Apariencia > Personalizar > Cabecera y navegación). Sin embargo, esta opción tiene limitaciones:
- Accede al Personalizador desde el panel de WordPress.
- Ve a Cabecera y navegación > Menú principal o Menú fijo.
- Cambia el color del texto o el fondo para que afecte al menú.
Importante: El cambio se aplica al menú completo, por lo que el icono hamburguesa puede heredar el color del texto. Si el diseño necesita más personalización, se recomienda utilizar CSS.
.
Usando código CSS personalizado
Para tener control total sobre el color del icono hamburguesa en Divi, lo más eficaz es usar CSS. Aquí tienes un ejemplo básico:
.mobile_nav .mobile_menu_bar:before{ color: #6d25bc !important; }Este código cambia el color de las tres líneas del icono hamburguesa a un tono naranja. Para aplicarlo:
- Ve a Divi > Opciones del tema > CSS personalizado.
- Pega el fragmento de código.
- Guarda y revisa el resultado en versión móvil.
Puedes adaptar el color a tu paleta de marca reemplazando #ff6600 por el valor hexadecimal deseado.
Aplicando color por estados (hover, activo)
Una buena práctica de diseño es modificar también el color del icono en diferentes estados:
.mobile_nav .mobile_menu_bar:hover:before{ color: #6d25bc !important; }Esto permite que el icono cambie de color al pasar el cursor por encima, lo que mejora la interacción del usuario.
También se puede personalizar el icono una vez que el menú está abierto:
.mobile_nav.opened .mobile_menu_bar:before{ color: #d50fe0 !important; }De este modo, se crea una transición visual que indica que el menú está activo.
Con nuestro plugin Divi Menu Builder
Si buscas una solución flexible, visual y sin complicaciones para personalizar por completo tu menú en Divi, el plugin Menú Personalizado para Divi es una herramienta imprescindible.
Este módulo funciona como un fullscreen menu, pero en lugar de mostrar el diseño estándar de Divi, te permite cargar tu propio menú construido con cualquier elemento del constructor visual. Puedes añadir:
- Vídeos o imágenes llamativas para captar la atención.
- Formularios de login o CTA directamente dentro del menú.
- Iconos o imágenes personalizadas en los enlaces.
- Estilos, colores y animaciones adaptadas a tu marca.
Además, permite crear varios menús y activarlos con un solo clic, lo cual es ideal si gestionas campañas temporales o necesitas alternar entre diferentes versiones del menú (por ejemplo, uno con banners activos y otro más neutro para el resto del año).
Ya no estás limitado al menú tradicional de Divi. Con este plugin puedes:
- Cambiar el botón del menú hamburguesa por otro icono o imagen.
- Usar el menú como un espacio creativo más, integrando contenido dinámico o promocional.
- Diseñar menús completamente personalizados para móvil y escritorio, sin necesidad de código.
En definitiva, el plugin Menú Personalizado para Divi convierte tu cabecera en una zona 100% editable y creativa. Si sueñas con un menú que no parezca un menú, este es el recurso que necesitas.
Descúbrelo aquí: Menú Personalizado para Divi
Ejemplo práctico paso a paso
Cómo cambiar el color del menú hamburguesa en Divi con CSS
Supongamos que el fondo de cabecera es claro y se necesita un icono hamburguesa oscuro. Este sería el paso a paso:
- Abre Divi > Opciones del tema > CSS personalizado.
- Pega este código:
- Guarda los cambios y haz pruebas en diferentes dispositivos.
Consejo: Usa herramientas como inspección de elementos en el navegador (F12) para identificar las clases exactas si el tema está personalizado.
Añadir color al hacer scroll o clic
En muchas webs, la cabecera cambia de color al hacer scroll. Para mantener la visibilidad del icono hamburguesa, también es útil adaptarlo a ese comportamiento:
.et-fixed-header .mobile_nav .mobile_menu_bar:before{ background-color: #fff !important; }Este código se activa cuando la cabecera se vuelve fija tras hacer scroll, y cambia el color del icono hamburguesa a blanco.
Errores comunes y cómo solucionarlos
Aunque averiguar cómo cambiar el color del menú hamburguesa en Divi parece sencillo, hay algunos errores frecuentes:
- El color no se aplica: esto suele ocurrir por falta de especificidad en el selector CSS. Usar
!importantpuede solucionarlo, pero conviene afinar los selectores. - No se ve en modo responsive: recuerda que el icono solo aparece en resolución móvil. Asegúrate de hacer pruebas en modo móvil del navegador o en un dispositivo real.
- Interferencia con plugins: algunos plugins de menús pueden sobrescribir el estilo. En ese caso, revisa qué clase están usando y personaliza esa.
- Diferencias entre cabecera normal y fija: Divi usa diferentes clases según el estado de la cabecera. Asegúrate de cubrir ambas con CSS si el diseño lo requiere.
Consejos de diseño para personalizar tu menú móvil
Personalizar el icono hamburguesa no solo es cuestión estética. También tiene que ver con la experiencia de usuario. Algunos consejos útiles:
- Asegúrate de que el color contraste con el fondo de cabecera.
- Considera cambiar el color en función del estado activo (menú desplegado) para indicar acción.
- Añade una transición suave para que el cambio de color no sea brusco:
- Si tu sitio tiene un diseño más moderno o minimalista, opta por colores sólidos y líneas más delgadas. Si es más llamativo, atrévete con degradados o efectos al pasar el cursor.
Además, si estás trabajando con el Theme Builder de Divi, puedes aplicar estos estilos directamente en las plantillas de cabecera personalizadas, con los mismos fragmentos de CSS.
Cómo cambiar el color del menú hamburguesa en Divi, conclusión: mejora la navegación en móviles con estilo
Modificar el color del icono hamburguesa en Divi no solo mejora la estética de tu web, también potencia la experiencia del usuario móvil. Tanto si usas los ajustes básicos del tema como si aplicas CSS avanzado, este pequeño cambio marca la diferencia en la navegación responsive.
En Destaca Imagen, sabemos que la personalización visual es clave para un sitio web atractivo y coherente. Si estás construyendo cabeceras con Divi, recuerda que cada detalle cuenta. El icono hamburguesa, aunque discreto, es un elemento clave de interacción. Hazlo visible, útil y alineado con tu marca.
Y si además quieres un control total del menú, incluyendo iconos, imágenes, diseños personalizados y compatibilidad total con Divi Builder, echa un vistazo al producto Menú Personalizado para Divi. Es la solución ideal para llevar tu menú al siguiente nivel.
¿Quieres facilitar aún más esta tarea a tus usuarios? Puedes integrar estas mejoras en tus plantillas Divi usando módulos preconfigurados o incluso incluir un fragmento CSS en tu documentación para clientes.
¿Necesitas una guía para otros elementos del menú en Divi? ¡Háznoslo saber y creamos un nuevo tutorial!
Cómo cambiar el color del menú hamburguesa en Divi | Destaca
0 comentarios