El tema Divi muestra automáticamente un menú plegado de 3 rayitas, también conocido como menú hamburguesa, cuando se visualiza desde dispositivos móviles pero ¿te gusta también este tipo de menús en todo tipo de pantallas?
Si quieres mostrar este menú independientemente del tamaño de la pantalla, en móviles, tabletas y ordenadores de escritorio, solo tienes que añadir el siguiente código a la sección CSS adicional del personalizador de temas, que encontrarás en Apariencia → Personalizar → CSS adicional de la administración de tu web o, si lo prefieres, en la sección Divi → Opciones del tema → CSS personalizado, también en la administración de tu sitio:
/* Menú móvil Divi en pantallas grandes */
@media only screen and ( min-width:980px ) {
#et_mobile_nav_menu { display:block !important; margin-bottom:20px; margin-top:6px }
#top-menu-nav { display:none; }
.et-fixed-header #et_mobile_nav_menu { margin-bottom:0; }
/* Establecemos el ancho y lo ponemos alineado a la derecha */
#mobile_menu { max-width: 400px; right: 0; left:auto; }}Guarda los cambios y se verá siempre el menú «hamburguesa», da igual desde qué dispositivo estén visitando tu web.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
¡Hola Fernando! Interesante apunte, sin duda. Por supuesto, siempre es bueno que haya la mayor cantidad de opciones y posibilidades, faltaría más; pero está bien recordar también que, en lo que yo conozco (que igual no estoy muy al día), todavía se considera que un «menú clásico» cuando el dispositivo lo permite, facilita la usabilidad y la accesibilidad. Desde luego que puedes corregirme si ves que estoy muy equivocado.
No lo digo por ti, desde luego; pero me encuentro en muchos casos en los que, en aras de un diseño «rompedor», se ha roto con muchos estándares web. Quizás demasiados. ¡Un interesante debate, sin duda! Saludos.
Este tipo de cambios se suele hacer sobre todo por diseño, no por usabilidad ni accesibilidad, pues es contrario a ello. Hay muchos usuarios que no sabrán que «eso» es un menú. Para facilitar el uso y accesibilidad lo mejor es un menú visible en todos los dispositivos, también en móviles
Hola una pregunta, si por ejemplo tienes varios menús como identificas el que quieres poner hamburguesa? gracias
Este código convierte el menú principal
Hola… ¿Qué diferencia hay entre añadir ese código, y seleccionar la opción «Deslizar» en Personalizador-Cabeceras y Navegación-Formato de cabecera?
Son menús distintos en aspecto sobre todo
En ambos casos, el logo a la izquierda y las rayitas a la derecha… pero al desplegar sí hay una diferencia importante: si hay muchos elementos de menú, con la opción «Deslizar» en Personalizador-Cabeceras y Navegación-Formato de cabecera, aparece una barra de scroll y puedes acceder a todos… pero con este código solo puedes acceder a los que quepan en la pantalla…
Muchas gracias, Fernando.
Un buen apunte para cuando hay muchos ítems en el menú principal.
Un saludo!
Fernando, primero que todo agradecerte por compartir tanto conocimiento.
Tengo la siguiente consulta, he creado una landing page en la cual tengo solo un apartado del menú y es un botón de acceso de clientes, por lo que no se justifica que mantenga un menú de hamburguesa en la vista móvil, es posible eliminar este menú hamburguesa al entrar al sitio en dispositivos moviles?
Muchísimas gracias por la información.
Saludos desde Chile.
Hola Camilo, pues no lo he probado pero aquí comparten un truco para quitarlo: https://www.learnhowwp.com/disable-mobile-menu-in-menu-module-divi/