Cómo hacer que el menú móvil de Divi tenga scroll

Si usas Divi te habrás fijado que si tienes un menú grande en el móvil tienes un problema. El menú será más alto que el alto de la pantalla del smartphone y de esta forma llegarás a una situación absurda:

  • Habrá una parte del menú a la que no pueda llegarse porque se quedará fuera de la pantalla
  • Al no haber scroll en el menú, esa parte quedará siempre oculta porque el scroll solo afecta a la pantalla como tal

Este problema no tiene porqué solo afectarte si tienes un menú muy grande, te puede pasar también en pantallas de móvil pequeñas o que están inclinadas, de forma que se quedan todavía más cortas.

La solución más práctica y simple es incluir scroll en el menú, así tendrás resuelto el problema y podrás tener un menú tan grande como quieras sin preocuparte de este asunto de la vista responsive.

Por cierto, esto me parece un fallo de Divi ya que por lo menos debería soportar el menú scroll por defecto para evitar este problema. Pero bueno, vamos a ponerle solución.

Incluir scroll menú Divi

Os cuento los pasos a dar:

  1. Iniciamos sesión en WordPress
  2. En la barra superior, en el menú que se despliega sobre el nombre del sitio, buscamos “Personalizador de temas”
  3. En la barra lateral a la izquierda elegimos la opción “CSS adicional”
  4. Incluimos el siguiente código:
.et_mobile_menu {   
    overflow-y: scroll !important;
    max-height: 80vh !important;
    -overflow-scrolling: touch !important;
    -webkit-overflow-scrolling: touch !important;
}

Guardáis y tendréis el problema resuelto. Por cierto, para probadlo recordad que tenéis que borrar cualquier tipo de caché que uséis para ver los resultados desde móvil. Aquí tenéis un ejemplo:

Menú con scroll en móvil
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Almacenamos las IPs desde la que se envían las valoraciones para evitar fraudes

2

2 thoughts on “Cómo hacer que el menú móvil de Divi tenga scroll

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito