Tutoriales

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 ;
    max-height: 80vh ;
    -overflow-scrolling: touch ;
    -webkit-overflow-scrolling: touch ;
}

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:

Nota: Hay una valoración incrustada en esta entrada, por favor, visita esta entrada para valorarla.

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

Francisco Javier Carazo Gil

Ver comentarios

Entradas recientes

RedSys para Contact Form 7 ahora muestra el justificante y el motivo del rechazo en la página de gracias

Ya está disponible la versión 2.2 de Contact Form 7 – Integración con RedSys, y…

hace % días

¿Qué aporta la integración de Bizum y métodos similares en el proceso de pago?

El comercio electrónico español, que se encuentra en pleno crecimiento y transformación, vive actualmente un…

hace % días

Pagos recurrentes en Contact Form 7: suscripciones con RedSys, paso a paso

Hasta ahora, la integración de Contact Form 7 con RedSys solo sabía cobrar pagos únicos:…

hace % días

Cuotas personalizadas con RedSys

El pago fraccionado de RedSys para WooCommerce lleva un tiempo permitiendo dividir el precio de…

hace % días

Contact Form 7 – Integración con RedSys ya habla catalán, gallego y euskera

Ya está disponible la versión 1.24 de Contact Form 7 - Integración con RedSys, y…

hace % días

Calendario de pagos a medida en WooCommerce Subscriptions: cobra en las fechas que tú decidas

Hasta ahora, cobrar una suscripción en WooCommerce significaba aceptar una regla muy simple: eliges un…

hace % días