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

¿Por qué falla Bizum en WooCommerce? 9 causas

Por qué falla Bizum WooCommerce: detecta errores de credenciales, firma, entorno y pedidos para recuperar…

hace % días

Plugin gratuito Redsys WordPress: qué revisar

Elige un plugin gratuito Redsys WordPress con criterio: compatibilidad, seguridad, configuración bancaria y límites para…

hace % días

Qué necesito para activar CECA Online en mi web

¿Qué necesito para activar CECA Online? Revisa contrato bancario, datos del terminal, seguridad, pruebas y…

hace % días

Cómo elegir una pasarela para suscripciones

Aprende a elegir una pasarela para suscripciones en WordPress: revisa recurrencia, compatibilidad, seguridad y soporte…

hace % días

Plugin Bizum WordPress para cobrar con control

Elige un plugin Bizum WordPress compatible con tu flujo de venta, configura la pasarela bancaria…

hace % días

Cómo aceptar CECA en reservas de WordPress

Aprende cómo aceptar CECA en reservas WordPress, configurar pagos seguros y confirmar cada reserva sin…

hace % días