Avisos
Vaciar todo

divi menu movil pantalla completa  

 
chaochao
 chaochao
Usuario experto

buenas,

me gustaría tener el desplegable menu del en vista movil a pantalla completa, full width y full height en vista movil.

Al desplegar el menú, el usuario sólo puede navegar en el menú, y sólo sale de ella clickando en la "X" que hemos creado para cerrar el menú.

La "X" ya lo tenemos, pero nos falta el full width y full height en vista movil.

¿Cómo podemos hacerlo?

ejemplos: apple.es o philips-hue.com

Gracias

Contenido solo visible a usuarios registrados

Citar
Respondido : 04/06/2022 11:06 am
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal,

Revisando los estilos actuales del menu en móviles que tienes actualmente, si que se despliega en ancho y alto completo el problema es que no permite hacer el scroll down para ver los elementos que se vayan desplegando

Prueba los siguientes estilos CSS en los cuales he modificado algunas cosas para hacerlo funcionar

.et_mobile_menu {
overflow-y: scroll!important;
min-width: 105vw;
margin-left: -10vw;
min-height: 100vh;
-overflow-scrolling: touch!important;
-webkit-overflow-scrolling: touch!important;
}

Saludos!

ResponderCitar
Respondido : 04/06/2022 2:26 pm

chaochao
 chaochao
Usuario experto

@bruno-vichetti

hola,

creo que así va bien, pero bueno habrá que ver diferentes dispositivos moviles.

.et_mobile_menu {
overflow-y:auto;
min-width: 105vw;
margin-left:-10vw;
min-height:100vh;
}

Pero hay un problema, cuando se despliega varios submenús, desde móviles, el último item del menú que en este caso es "mi cuenta", se queda abajo y se lee y el scroll no hace lo suficiente.

Se puede meter un padding bottom o margin bottom, lo he probado pero no funciona, puede que lo esté aplicando incorrectamente.

ResponderCitar
Respondido : 05/06/2022 8:51 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal,

Tal como en el CSS sugerido anteriormente es necesario limitar la altura mínima pero no la máxima, si colocar un max-height, por mas padding o elementos que coloques siempre se ajustara al screensize de la pantalla, ese es el uso de la medida VH,

Modificaría el CSS compartido de la siguiente manera

.et_mobile_menu {
overflow-y:auto;
min-width: 105vw;
margin-left:-10vw;
min-height:100vh;
}

Saludos!

ResponderCitar
Respondido : 05/06/2022 9:33 pm

chaochao
 chaochao
Usuario experto

@bruno-vichetti

hola, no me has puesto nada de codigo CSS diferente al mio. 

Ya está en min-height, cuál sería los códigos para meter un padding bottom o margin bottom?

Gracias

ResponderCitar
Respondido : 06/06/2022 12:45 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola, 

En este caso revisa si al añadir este código CSS permite que al hacer el scroll se visualice los menús

.et_mobile_menu {
overflow: scroll !important;
max-height: 84vh;
box-shadow: 0px 0px 30px rgba(0,0,0,0.3)
}

Prueba esto y nos comentas como ha ido todo

Un Saludo 

ResponderCitar
Respondido : 06/06/2022 1:08 pm