Añadir texto a la derecha del menú hamburguesa en móviles

Por qué añadir texto al menu hamburguesa en los dispositivos móviles

Trasteando por la web, he encontrado algo que quiero compartir con vosotros. Un poquito de personalización de un menu hamburguesa.

Cuando pasamos horas y horas delante del ordenador nos mimetizamos de tal forma con el entorno web que a veces obviamos detalles que para otras personas menos habituadas pueden resultar confusas.

Un ejemplo puede ser el tema que hoy nos ocupa.

Un menu hamburguesa son las 3 rallitas que podemos ver cuando vemos algunas webs en dispositivos móviles. Y Mencionamos «menús hamburguesa» dando por hecho que todo el mundo sabe de qué hablamos. Muchos pensarán en Burger King o McDonald’s.

Y no pensamos que tal vez cuando ven las 3 rallitas típicas de estos menús en los dispositivos móviles no saben para que están ahí. Así que veremos cómo solucionarlo.

Más usabilidad

¿Por qué no  ponérselo un poquito más fácil a estos usuarios? Vamos a añadir un texto a la derecha de este menú. Y que mejor que complementar estas tres rallitas horizontales con su significado. Pondremos el texto “menu” a la derecha. Así no habrá lugar a confusiones.

Bastarán unas escasas líneas de código CSS para hacerlo.

El código CSS

Puedes ponerlo en la hoja de estilo de tu tema hijo si usas una, lo que es recomendable.

Si no usas un tema hijo, puedes ponerlo en el panel css de los ajustes del tema Divi. DIVI >> Opciones de tema >> desplázate hacia abajo.

Este es el código que debes copiar.

/* coloca la palabra MENU a la derecha del menu hamburguesa */
.mobile_menu_bar:after {
    content: 'MENU';
    position: relative !important;
    bottom: 10px;
    left: 10%;
    color: #c4c4c4;
}

/* Cambia el menu a X cuando está abierto */
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

Y ya lo tienes. Una vez hayas insertado el código, ya verás el texto a la derecha de tu menú cuando veas tu web en un móvil.