Cambiar ícono del menú hamburguesa en Divi (móvil)

Si alguna vez abriste tu sitio en móvil y sentiste que el ícono de las tres rayas del menú se ve plano, genérico o simplemente no encaja con el diseño que tanto trabajaste — no estás solo. El menú hamburguesa es uno de esos elementos que pasan desapercibidos cuando están bien, pero que rompen la coherencia visual cuando no encajan. La buena noticia es que cambiar el ícono del menú hamburguesa en Divi no requiere plugins ni tocar el código del tema: se hace con unas pocas líneas de CSS y el icon font que ya viene incluido en Elegant Themes.

En este tutorial te explico exactamente cómo hacerlo, qué íconos puedes usar, cómo agregar una animación de rotación al abrir el menú, y cuáles son los errores más comunes que hacen que el CSS no funcione. Al final también te dejo una tabla de referencia para que encuentres el código de cada ícono sin tener que adivinar.

¿Por qué cambiar el ícono del menú hamburguesa en Divi?

El menú hamburguesa por defecto de Divi usa el ícono de tres líneas horizontales (☰). Es funcional, reconocible, y precisamente por eso se ve igual en miles de sitios WordPress. Si tu marca tiene una identidad visual fuerte o trabajas con un cliente que quiere diferenciarse, ese ícono genérico puede restar puntos en la primera impresión móvil.

Cambiar el ícono te permite alinearlo con el sistema visual del sitio: usar una cruz más estilizada, un ícono de puntos en cuadrícula, una flecha, o cualquier símbolo del catálogo de Elegant Themes. Además, combinado con una animación de transición, el menú pasa de ser un elemento funcional a un detalle de diseño que los visitantes notan — aunque no sepan exactamente por qué el sitio se siente más cuidado.

Cómo acceder al CSS personalizado en Divi

Divi permite agregar CSS personalizado directamente desde el panel de administración, sin necesidad de editar ningún archivo del servidor. El lugar correcto donde agregar el código es en el campo de CSS adicional del personalizador de WordPress, o bien en WordPress → Divi → Opciones del tema → General → CSS personalizado.

Consejo: Si usas opciones de visibilidad del encabezado por página, ten en cuenta que este CSS aplica de forma global en todo el sitio. Si quieres que el ícono cambie solo en ciertas páginas, necesitarías agregar una clase CSS condicional al body y ajustar el selector.

El CSS para cambiar el ícono del menú hamburguesa

El menú hamburguesa en Divi está controlado por el elemento .mobile_menu_bar. El ícono que ves es en realidad el pseudo-elemento ::before de ese contenedor, que muestra un carácter del icon font de Elegant Themes. Para cambiarlo, sobreescribimos el valor de content con el código del nuevo ícono que queremos mostrar.

Este es el CSS básico:

.mobile_menu_bar:before {
  content: '64';
  color: #000000;
}

.mobile_nav.opened .mobile_menu_bar:before {
  content: '4d';
  color: #000000;
}

El primer bloque define el ícono que se ve cuando el menú está cerrado. El segundo define el que aparece cuando el menú está abierto (clase .opened activa). En este ejemplo, 64 muestra un ícono de menú alternativo y 4d muestra una X para el estado abierto.

Cómo convertir el código del ícono

Elegant Themes publica su catálogo completo de íconos en elegantthemes.com/blog/resources/elegant-icon-font. Ahí puedes ver todos los símbolos disponibles con su código HTML correspondiente (formato d o similar).

Para usar ese código en el CSS, la conversión es simple:

1. Toma el código HTML del ícono, por ejemplo: d
2. Elimina el prefijo &#x y el punto y coma final ;
3. Lo que queda (64) es el valor que va dentro de content: '64' en tu CSS

Consejo: No todos los íconos del catálogo funcionan igual de bien como hamburguesa. Los que mejor funcionan son los relacionados con menú, cuadrícula y navegación — están al inicio de la lista del catálogo. Los íconos muy detallados a tamaños pequeños pueden perder legibilidad.

Tabla de íconos útiles para el menú hamburguesa

Para ahorrarte el tiempo de buscar en el catálogo completo, acá te dejo una selección de los íconos que mejor funcionan como botón de menú en móvil:

Los códigos exactos pueden variar según la versión del icon font. Si uno no se renderiza correctamente, revisa el catálogo oficial de Elegant Themes y usa el código de ahí directamente.

Agregar animación de rotación al abrir el menú

Cambiar el ícono ya es un buen paso, pero combinarlo con una animación de rotación le da un acabado mucho más profesional. El efecto es simple: el ícono gira 90 grados cuando el menú se abre, y vuelve a su posición original cuando se cierra.

Este CSS extiende el bloque anterior para agregar la animación:

.mobile_menu_bar:before {
  content: '64';
  color: #000000;
  display: inline-block;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

.mobile_nav.opened .mobile_menu_bar:before {
  content: '64';
  color: #000000;
  transform: rotate(90deg);
}

Nota que en este caso usé el mismo ícono para los dos estados (64) y la diferenciación visual viene de la rotación. Si prefieres un cambio de ícono más el giro, puedes combinar ambos — aunque visualmente suele quedar mejor elegir una sola estrategia: o cambias el ícono, o lo rotas, o ambas con íconos muy similares.

Consejo: El valor 0.3s para la transición funciona bien en la mayoría de los casos. Si quieres que el giro sea más rápido (por ejemplo en sitios con mucha energía visual), bájalo a 0.2s. Si prefieres algo más suave y elegante, prueba con 0.4s. Los valores por encima de 0.5s empiezan a sentirse lentos para una interacción tan pequeña.

🎓 ¿Quieres profundizar en personalización móvil con Divi?
En uxdivi.com/cursos tenemos módulos dedicados a responsive design y personalización avanzada con Divi 5, donde cubrimos desde el comportamiento del menú hasta la gestión de columnas y breakpoints. Accede como suscriptor y aplica todo esto directamente en tus proyectos con clientes.

Errores comunes al implementar el CSS

En mi experiencia respondiendo dudas de la comunidad, hay cuatro problemas que aparecen una y otra vez cuando este CSS no funciona como se espera:

El ícono no cambia aunque el CSS esté bien escrito

El motivo más frecuente es que el icon font de Elegant Themes no está cargado en esa página. Esto pasa con mayor frecuencia en páginas de destino construidas con el Divi Builder en modo pantalla completa, donde se desactivan partes del header. Si el font no carga, el pseudo-elemento ::before muestra el carácter de texto en lugar del símbolo. Verifica con las DevTools del navegador que el font ETmodules está presente en la hoja de estilos.

El estado «abierto» no aplica el segundo bloque CSS

El selector .mobile_nav.opened .mobile_menu_bar:before requiere que la clase .opened y .mobile_nav estén en el mismo elemento padre. En algunas versiones del tema Divi, la estructura del DOM puede variar ligeramente. Si el segundo estado no funciona, abre las DevTools mientras tienes el menú abierto e inspecciona qué clases se agregan al contenedor del menú — así ajustas el selector exacto.

El color del ícono no cambia

El color del ícono del menú hamburguesa en Divi también se puede configurar desde las opciones del tema en la sección de encabezado. Si defines color en el CSS personalizado pero las opciones del tema lo sobreescriben con mayor especificidad, el cambio no se verá. Agrega !important al valor del color si notas este comportamiento: color: #000000 !important;

La animación de rotación no funciona en Safari móvil

Si la animación de rotación falla en iPhone, agrega el prefijo -webkit- a las propiedades de transición y transform. Aunque los navegadores modernos ya no lo requieren, algunas versiones de Safari en iOS aún se benefician de él. Queda así: -webkit-transition: transform 0.3s ease; y -webkit-transform: rotate(90deg);

🎓 ¿Quieres aprender más sobre personalización del menú en Divi?
Si te interesa ir más allá del ícono y controlar el comportamiento completo del header en móvil — incluyendo cómo integrar acciones de WooCommerce en el menú y ajustar la visibilidad por dispositivo — eso también lo cubrimos en el área de cursos de UXDivi.

Compatibilidad con el diseño responsive

Este CSS aplica al menú hamburguesa que Divi muestra en dispositivos móviles, pero conviene verificar en cuál breakpoint exacto aparece el menú de tres rayas. Por defecto Divi activa el menú hamburguesa por debajo de los 980px, aunque ese valor se puede ajustar. Si usas un breakpoint personalizado, asegúrate de probar el resultado en el ancho exacto donde ocurre el cambio.

Para pruebas rápidas de responsive sin depender de un dispositivo real, puedes revisar estas herramientas para pruebas de diseño responsive que me ayudan a verificar cómo se ve el menú en distintos tamaños antes de publicar.

También vale la pena revisar cómo se ven las columnas de tu diseño en móvil al mismo tiempo que ajustas el menú — si cambias el header, muchas veces conviene revisitar el orden de las columnas en móvil para asegurarte de que el conjunto quede coherente.

Preguntas frecuentes

¿Este CSS funciona con Divi 4 y Divi 5?

Sí. Los selectores .mobile_menu_bar y .mobile_nav.opened se mantienen en ambas versiones del tema. Sin embargo, si tu instalación usa Divi 5 con el nuevo sistema de estilos globales, te recomiendo aplicar el CSS desde el personalizador de WordPress (Apariencia → Personalizar → CSS adicional) en lugar de las Opciones del Tema, ya que Divi 5 prioriza ese canal para estilos del frontend.

¿Puedo usar íconos de Font Awesome en lugar del icon font de Elegant Themes?

Técnicamente sí, pero requiere un paso adicional: cargar Font Awesome en el sitio (si no está ya activo) y cambiar la fuente del pseudo-elemento .mobile_menu_bar:before a FontAwesome en lugar del font de Elegant Themes. Es un poco más de trabajo y puede generar conflictos si el icon font de ET ya está declarado en el elemento. Mi recomendación es usar siempre el catálogo de Elegant Themes para este caso puntual — está incluido en Divi y no agrega dependencias externas.

¿Cómo sé que el ícono que elegí es accesible?

El ícono del menú hamburguesa debería ser siempre legible como tal — es decir, que el usuario entienda que es un botón de menú sin necesidad de texto. Los íconos más abstractos (una X, un punto, una flecha) pueden funcionar bien cuando el menú está abierto, pero como estado inicial pueden confundir al usuario si se alejan demasiado del patrón reconocible. Mi criterio: usa íconos alternativos para el estado cerrado solo cuando son variantes del hamburguesa clásico (tres líneas en distintas formas), y guarda los íconos más creativos para el estado abierto.

¿El cambio de ícono afecta el SEO?

No directamente. El ícono del menú es un elemento de interfaz que Google no indexa como contenido. Lo que sí puede afectar la experiencia de usuario y, por extensión, las métricas de comportamiento (que sí influyen en SEO), es si el ícono elegido resulta confuso y el usuario no entiende que es un menú. Quédate con íconos reconocibles y no habrá problema.

Mis recomendaciones para implementar esto bien

1. Elige el ícono para el estado cerrado primero, y asegúrate de que se reconoce como menú antes de preocuparte por el estado abierto.
2. Prueba el resultado en un dispositivo real (o en las DevTools a 375px) antes de dar el cambio por terminado — los emuladores del navegador no siempre muestran el comportamiento exacto de Safari en iOS.
3. Si usas la animación de rotación, mantén el mismo ícono en ambos estados. Combinar cambio de ícono más rotación puede verse confuso en la transición.
4. Documenta el código CSS que usaste en los apuntes del proyecto del cliente — este es exactamente el tipo de personalización que se olvida de dónde está cuando necesitas hacer ajustes seis meses después.
5. Revisa que el color del ícono tenga buen contraste con el fondo del header, especialmente si el header tiene transparencia en la página de inicio. El ícono debe ser visible en todos los estados del scroll.

Conclusión

Cambiar el ícono del menú hamburguesa en Divi es uno de esos detalles que toma diez minutos y que puede marcar la diferencia en cómo se percibe el cuidado visual de un sitio en móvil. Con el CSS que viste acá, tienes control total sobre el ícono en estado cerrado, en estado abierto, y la animación de transición entre los dos — todo sin instalar ningún plugin adicional. Una vez que lo configuras y lo pruebas en un dispositivo real, queda listo y no tienes que volver a tocarlo.

🎓 ¿Quieres dominar el diseño responsive con Divi de forma completa?
En uxdivi.com/cursos cubro desde los fundamentos del encabezado en Divi hasta personalizaciones avanzadas de CSS para móvil, tablet y desktop. Si trabajas con clientes y quieres entregar sitios con ese nivel de acabado profesional en cada detalle, el acceso como suscriptor te da todo el contenido sin límite.