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 acepta preautorizaciones

RedSys aparte de los pagos normales, llamados autorizaciones, acepta una variedad de operaciones: desde autorizaciones…

hace % días

Ordenar productos de forma diferente por cada categoría en WooCommerce

WooCommerce permite ordenar los productos de una forma nativa, para poder presentar primero los que…

hace % días

Evitar que se instalen los temas por defecto de WordPress cada vez que actualizas el núcleo

Cada vez que hay una actualización grande del núcleo WordPress, por defecto WordPress te instala…

hace % días

Pantalla LCD: ¿qué es?

Una pantalla LCD es una pantalla delgada y hecha de cristal líquido. Se usa en…

hace % días

Flujos de pago con Gravity Flow y RedSys

De todos los plugins que existen para Gravity Forms, que son numerosos porque la propia…

hace % días

CMS, ¿Qué es y qué ventajas tiene?

Un CMS, como WordPress, facilita la creación y gestión de contenido en la web, sin…

hace % días