Tutorial Divi: Menú móvil (hamburguesa) también en pantallas grandes

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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.2 / 5. Total de votos: 9

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

10 comentarios en “Tutorial Divi: Menú móvil (hamburguesa) también en pantallas grandes”

  1. ¡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.

    1. 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

      1. 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…

  2. Camilo Bahamondes

    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.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido