Empezar

Aunque las tres barras que conforman el llamado menú de hamburguesas han existido durante mucho tiempo, puede ser apropiado aclarar que el ícono contiene un menú que se puede expandir.

Ten en cuenta que el icono de menú hamburguesa debe estar alineado a la derecha para que el texto aparezca correctamente.

Paso a paso

1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
2. Pega el siguiente código CSS:

/* Agregar texto a la izquierda del menú hamburguesa en  Generador de temas */

.et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 40px;
}

/* Agregar texto a la izquierda del menú hamburguesa en Divi 3 */

#et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 33px;
bottom:30px;
}

3. Puedes cambiar el texto MENÚ a lo que desees, pero mejor si es breve.

4. Guarda los cambios.

Paso a paso

1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
2. Pega el siguiente código CSS:

/* Cambiar el icono de colapso a una X en el menú hamburguesa */

.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

3. Solo tienes que agregar color:#000 !important; antes de la última etiqueta } para cambiar el color del icono. Reemplaza #000 (negro) con el color de tu elección.

4. Guarda los cambios.

La línea azul en la parte superior del menú para móvil es una pista clara de que tu sitio web está hecho en Divi. Si no quieres que tu menú sea igual como todos los demás menus en Divi puedes eliminar esta línea.

Paso a paso con Divi 3

1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
2. Pega el siguiente código CSS:

/* Eliminar la línea superior del menú para móvil */

.et_mobile_menu {
border-top:0px;
}

2. Guarda los cambios.

Paso a paso con Divi 4

El fragmento de CSS para Divi 3 funcionará perfecto también con Divi 4. Pero con Divi 4 también se puede eliminar la línea superior del menú hamburguesa sin usar CSS.  

1. Abre el Generador de temas
2. Edita tu plantilla de encabezado
3. Haz clic en la rueda dentada para ir a los ajustes
4. Ve a la pestaña Diseño > Enlaces al menú desplegable y cambia Color de línea del menú desplegable a rgba(0,0,0,0)
5. Guarda los cambios

Esto hará que la línea tenga opacidad cero, por lo tanto haciéndola invisible.

Textos cortos tienden a funcionar mejor en moviles. Lo mismo es cierto para el menú para dispositivos móviles. No es posible centrar el texto del menu para móvil en el constructor Divi ni en el del Personalizador de temas. Pero con un par de líneas de CSS resolverás el problema, tanto en Divi 3 como en Divi 4.

Paso a paso

1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
2. Pega el siguiente código CSS:

/* Centrar el texto del menú para móvil */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

2. Guarda los cambios.

Este es un ajuste que recomiendo que todos implementéis: deja que el menú para móvil llene el 100% del ancho del dispositivo móvil en lugar de colgar como una tira delgada. 

Paso a paso

1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
2. Pega el siguiente código CSS:

/* Hacer que el menú para móvil tenga anchura completa */

.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

2. Guarda los cambios.

Paso a paso

1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
2. Pega el siguiente código CSS:

/* Hacer que el menú para móvil sea de altura completa */

.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}
html {
height: -webkit-fill-available;
}
/* Remove the animation to avoid delay */
.mobile_nav.opened .et_mobile_menu {
display:block !important;
}

2. Guarda los cambios.

Aquí están los seis fragmentos de CSS reunidos en un solo lugar.

Paso a paso

1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
2. Pega el siguiente código CSS:

/* Agregar texto a la izquierda del menú hamburguesa en  Generador de temas */
.et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 40px;
}

/* Agregar texto a la izquierda del menú hamburguesa en Divi 3 */
#et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 33px;
bottom:30px;
}

/* Cambiar el icono de colapso a una X en el menú hamburguesa */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

/* Eliminar la línea superior del menú para móvil */
.et_mobile_menu {
border-top:0px;
}

/* Centrar el texto del menú para móvil */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

/* Hacer que el menú para móvil tenga anchura completa */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Hacer que el menú para móvil sea de altura completa */
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}
html {
height: -webkit-fill-available;
}

/* Remove the animation to avoid delay */
.mobile_nav.opened .et_mobile_menu {
display:block !important;
}

2. Guarda los cambios.