Avisos
Vaciar todo

Mantener amplitud menú móvil Divi al hacer scroll

8 Respuestas
5 Usuarios
0 Reactions
23 Visitas
Respuestas: 299
Reputable Member
Topic starter
 

Buenos días,

Para hacer en móvil colapsable las opciones de los submenús en Divi he seguido los pasos del artículo: https://soporteforo.webempresa.eu/guia/crear-un-menu-movil-colapsable-con-divi/ en lo referente a cabecera personalizada con Generador de Temas. Funciona perfectamente pero cuando se hace scroll con el menú abierto se contrae y se dificulta mucho la posibilidad de elegir una u otra opción del menú (esto no es debido a los cambios que acabo de hacer, antes ya pasaba igual). Adjunto imágenes del menú abierto inicialmente y el resultado tras hacer scroll.

WhatsApp Image 2022 07 04 at 10.07.06 AM
WhatsApp Image 2022 07 04 at 10.07.05 AM

¿Sería posible hacer que se mantuviera la altura de las líneas de las opciones del menú al hacer scroll?

Muchas gracias,

Contenido solo visible a usuarios registrados


 
Respondido : 04/07/2022 9:55 am
Pepe
 Pepe
Respuestas: 41133
Illustrious Member Admin
 

Hola Gabriel.

Prueba añadir lo siguiente en apariencia -> Personalizar -> CSS Adicional:

@media (max-width: 780px) {
.et_pb_menu .et_mobile_menu, .et_pb_menu .et_mobile_menu ul {
list-style: initial!important;
}
.et-l--header ul {
line-height: 5em;
}
}

Un saludo


 
Respondido : 04/07/2022 10:44 am
Respuestas: 299
Reputable Member
Topic starter
 

@pepesoler Muchas gracias, sí, esa es la idea pero hay algún detalle que debo corregír aún.

Al abrirlo sin scroll me muestra las opciones centradas pero con un punto a la izquierda y al abrirlo con scroll ya se elimina el punto pero el texto no está centrado verticalmente en la fila (aparece justificado abajo). Además se muestran unas sombras sobre las opciones del submenú que quería eliminar. No sé si me podríais ayudar con esto. Adjunto 2 imágenes de lo comentado.

WhatsApp Image 2022 07 04 at 2.07.03 PM
WhatsApp Image 2022 07 04 at 2.15.02 PM

 

Muchas gracias


 
Respondido : 04/07/2022 12:17 pm
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Gabriel, 

Primero probemos solucionar el error de visualización en el scroll, para ello revisa desactivar de forma temporal el anterior que añadiste para el alto del menú y prueba el siguiente 

@media (max-width: 780px) {

.et_pb_sticky.et_pb_menu_2_tb_header.et_pb_menu ul li a, .et_pb_sticky.et_pb_menu_3_tb_header.et_pb_menu ul li a, .et_pb_sticky.et_pb_menu_1_tb_header.et_pb_menu ul li a {
line-height: 2em !important;
}

}

Guarda los cambios y revisa si al hacerlo el menú funciona de forma correcta

Un Saludo 

 

 
Respondido : 04/07/2022 12:55 pm
Respuestas: 299
Reputable Member
Topic starter
 

@karen Genial! Sí, funciona correctamente, ya no se contrae el menú al hacer scroll, todas las filas permanecen con la misma altura. Solo me falta eliminar la sombra que aparece en el submenú al hacer scroll. ¿Podrían ayudarme?

WhatsApp Image 2022 07 04 at 10.41.11 PM

Muchas gracias


 
Respondido : 04/07/2022 8:52 pm
Bruno
Respuestas: 6488
Illustrious Member Moderator
 

Que tal Gabriel,

Puedes probar con los siguientes estilos CSS

.sub-menu {
box-shadow: none !important;
}

Prueba y nos comentas, Saludos!


Esta publicación ha sido modificada el hace 3 años por Bruno
 
Respondido : 04/07/2022 9:13 pm
Respuestas: 299
Reputable Member
Topic starter
 

Perfecto Bruno. Muchas gracias!!


 
Respondido : 04/07/2022 10:31 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Gabriel,

Comprendo que podemos dar como cerrado el tema? Confirmanos para poder hacerlo.

Un saludo 🖐️ 


 
Respondido : 04/07/2022 10:42 pm