[Resuelto] Estrechar desplegable menus hamburguesa en movil y tablet

Hola Pedro, 

Puedes enviarnos algun ejemplo como quieres que se muestre el icono? de esta forma podemos verifica con mayor detale lo que nos comentas. 

Un Saludo 

El icono es correcto. Me gustaria estrechar los desplegable para que se parezca al vuestro

https://www.mercerianinot.es/telas-infantiles/

Hola Pedro,

He estado verificando pero vemos que estas haciendo cambios en el menu, una alternativa si quieres que el alto sea un poco mayor de probar con el siguiente codigo CSS

@media (max-width: 768px) {

nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
height: 40vh;
}

.elementor-nav-menu li {
border-width: 0;
margin-top: 10px;
}

}

Veriricalo y nos comentas como va todo

Un Saludo

No entiendo lo de que estoy haciendo cambios. Mis menus desplegables ocupan  el ancho completo y quiero que ocupen u 80% aproximadamente.

Y me gustaría

Hola Pedro,

Para tener un aspecto como el siguiente:

Puedes probar aplicar los siguientes estilos complementando los sugeridos por mi compañera

@media (max-width: 768px) {
.elementor-nav-menu__align-start .elementor-nav-menu {
max-width: 90%;
margin-left: 5%;
border: solid 1px #aee5e6;
}
}

Si quieres hacer mas angosto el contenedor del menu debes reducir el porcentaje del max-width pero debes compensar el margin-left para que se vea centrado

Tambien puedes cambiar el grosor y el color del borde

Saludos!

Ok. Esta tarde pruebo. Faltaría el otro desplegable más estrecho y pegado a la izquierda

https://www.mercerianinot.es/telas-infantiles/

Hola Pedro

Prueba con esto:

@media (max-width: 768px) {
nav.hfe-nav-menu__layout-horizontal.hfe-nav-menu__submenu-classic.hfe-dropdown.menu-is-active{
padding: 30px 30px 30px 30px;
background: transparent !important;
}
}

Un saludo

buenas. ok funcionado

@media (max-width: 768px) {
nav.hfe-nav-menu__layout-horizontal.hfe-nav-menu__submenu-classic.hfe-dropdown.menu-is-active{
padding: 30px 30px 30px 30px;
background: transparent !important;
}
}

hola, este le faltaria los laterales transparentes

@media (max-width: 768px) {
.elementor-nav-menu__align-start .elementor-nav-menu {
max-width: 90%;
margin-left: 5%;
border: solid 1px #aee5e6;
}
}

Hola Pedro,

Prueba lo siguiente

@media (max-width: 768px) {
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
background-color: transparent;
}
.elementor-nav-menu__align-start .elementor-nav-menu {
max-width: 90%;
margin-left: 5%;
border: solid 1px #aee5e6;
background-color: #fff;
}
}

Saludos!

he quitado el borde y he añadido important! y funciona, solo queda un borde azul abajo que no encuentro don quitarlo o adaptar el ancho al menu, supongo que arriba tambien esta pero no molesta visualmente.

Hola Pedro,

@media (max-width: 768px) {
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
background-color: transparent !important;
box-shadow: 0px 0px 0px 0px #00ced3 !important;
}
}

Prueba asi

Saludos!

muchas gracias, al ver en tu código box-shadow lo he podido quitar desde elementor, gracias

Hola Pedro, 

Enhorabuena ha funcionado como necesitas, es un placer para nosotros siempre poder ayudarte. 

Comentanos si con esto podemos dar el tema como solucionado. 

Un Saludo 😊