Espaciado y desenfoque de menú móvil en tema Classic

valeria9483

Hola a todos,

Estoy intentando mejorar la experiencia del menú móvil en mi tienda con el tema Classic. Quiero que el cajón del menú tenga un espaciado más cómodo y, sobre todo, que el fondo se desenfoque ligeramente cuando el menú está abierto. He probado a añadir algunas reglas en themes/classic/assets/css/custom.css, pero no consigo que el efecto backdrop-filter funcione consistentemente en todos los móviles, y el espaciado no se ve del todo bien.

Este es el fragmento que tengo:

/* Mi intento de estilo para el menú móvil */
#mobile_top_menu_wrapper {
  width: 85%; /* Intento de ancho */
  padding: 10px;
}

.js-mobile-menu-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

El backdrop-filter no se aplica en muchos dispositivos y a veces el menú se ve un poco cortado en la parte inferior de la pantalla por la barra de direcciones de iOS. ¿Alguna idea de cómo arreglar esto?

joaquin_tienda43

Hola @valeria9483, entiendo tu frustración con el backdrop-filter, no siempre es fácil de implementar por la compatibilidad de navegadores, especialmente en versiones de PrestaShop más antiguas. ¿Podrías decirnos qué versión exacta de PrestaShop estás usando? A veces, la versión de PrestaShop y el JavaScript del tema pueden influir en cómo se manejan los eventos o clases CSS. Si el menú se corta, puede ser un tema de height: 100vh que no siempre funciona bien con las barras de direcciones móviles.

teresa_moda

@joaquin_tienda43 tiene razón, la versión es clave. Además, yo miraría el HTML de tu tema Classic para ver si el js-mobile-menu-overlay es el elemento correcto para aplicar ese blur. A veces hay un div padre o un wrapper que necesita el estilo. Para el espaciado, el width: 85% puede ser problemático si no hay un max-width o si el contenido dentro del menú no se ajusta bien. Prueba a inspeccionar el elemento con las herramientas de desarrollador del navegador en un móvil para ver qué estilos se están aplicando realmente.

Milo

Hola @valeria9483,

El problema que describes es común. El backdrop-filter tiene una compatibilidad limitada en algunos navegadores móviles más antiguos y la gestión del vh en iOS es un dolor de cabeza, especialmente en versiones de PrestaShop como la 1.7.5.2 que mencionas (gracias por la aclaración, @joaquin_tienda43). Te propongo un ajuste en tu themes/classic/assets/css/custom.css que mejora la robustez del menú y el desenfoque:

/* Ajustes para el cajón del menú móvil y el efecto de desenfoque */
#mobile_top_menu_wrapper {
  width: min(calc(100vw - 50px), 320px); /* Ancho adaptable, mínimo 50px de margen */
  padding: 20px 15px;
  box-sizing: border-box;
  left: -100%; /* Asegura que está oculto al inicio */
  transition: left 0.3s ease-out; /* Transición suave al abrir/cerrar */
}
body.mobile-menu-open #mobile_top_menu_wrapper {
  left: 0;

Explicación de los cambios:

#mobile_top_menu_wrapper: He cambiado el width a min(calc(100vw - 50px), 320px). Esto hace que el menú ocupe el 100% del ancho de la ventana menos 50px de margen derecho, pero con un máximo de 320px, lo que es más flexible y estético. También he añadido left: -100% y una transition para una apertura más suave.
.js-mobile-menu-overlay: Aseguro que el overlay cubre toda la pantalla con height: 100%. El background-color con transparencia actúa como un fallback visual si el backdrop-filter no es compatible. Las propiedades visibility y opacity con transiciones controlan la aparición y desaparición suave del overlay. Al abrir, la transición de visibility no tiene retraso para que aparezca instantáneamente, y al cerrar, sí lo tiene para que no desaparezca bruscamente.

Con esto, deberías tener un comportamiento más consistente y el desenfoque se aplicará cuando el navegador lo soporte, con un buen fallback si no.

valeria9483

¡Increíble @Milo! He aplicado tus cambios en custom.css y el menú móvil ahora se ve y funciona mucho mejor. El espaciado es perfecto y el efecto de desenfoque se ve genial en los dispositivos más recientes, y en los antiguos al menos tiene un fondo semitransparente que también es una mejora.

Lo del min(calc(100vw - 50px), 320px) es una solución muy elegante para el ancho. Y las transiciones hacen que todo se sienta mucho más fluido. Muchas gracias por la ayuda tan detallada, ¡es exactamente lo que necesitaba!