Cómo hacerlo en Divi: el método más sencillo

Divi no trae esta función por defecto, pero la estructura del menú móvil permite modificar el ícono mediante CSS avanzado.

A continuación, te comparto el código exacto que permite reemplazar la hamburguesa por una X:

Paso a paso: añade el código en Divi

Sigue estos pasos:

1. Entra a Divi → Opciones del Tema

Desde tu panel de WordPress, ve a:

Divi → Theme Options (Opciones del Tema)

2. Abre la pestaña “General”

Desplázate hasta encontrar la sección:

➡️ Custom CSS (CSS Personalizado)

3. Pega el código

Inserta el fragmento

4. Guarda los cambios

Eso es todo. No necesitas más configuraciones, ni modificar archivos, ni usar plugins externos.

¿Por qué funciona este código?

Divi utiliza un set de íconos basado en una fuente propia.
Cuando el menú está abierto, el elemento .mobile_nav.opened se activa, permitiendo modificar el contenido del pseudo-elemento :before, que representa el icono.

El valor \4d es el código del ícono “X” dentro de la fuente de iconos de Divi.

En resumen:

• El icono de hamburguesa = por defecto

• El menú abierto → cambiamos el icono por el código “\4d”

• Resultado: aparece una X perfectamente centrada y alineada

Opcional: cambia el color o tamaño del icono

Si quieres un diseño más personalizado, puedes agregar extras como:

Cambiar el color:

Cambiar tamaño del ícono:

Mejores prácticas para SEO y usabilidad

• Asegúrate de que el menú no se superponga con elementos importantes.

• Prueba en varios dispositivos reales (no solo en simuladores).

• Mantén coherencia visual con el branding del sitio.

• Evita plugins para tareas que pueden lograrse con CSS (mejora la velocidad).