Fondo Megamenu Elementor

Hola Lourdes,

Estoy verificando el sitio web y es posible que el error sea porque tanto la cabecera como el desplegable tienen aplicado un backdrop-filter, pero el desplegable está dentro de la cabecera  y esto hace que el segundo desenfoque una capa ya procesada no se vea igual. Para solucionarlo, lo que puedes probar es lo siguiente:

Al contenedor principal de la cabecera donde añades el estilo actual al header principal donde está el menú, utiliza este CSS en lugar del anterior:

selector {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}

selector::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;

background: rgba(120, 98, 82, 0.28);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);

border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: inherit;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

selector > .e-con-inner {
position: relative;
z-index: 1;
}

Luego al contenedor del desplegable donde estás añadiendo el CSS ahora añádele este CSS que esta en el archivo que te envío.

Guarda los cambios y regenera la caché de Elementor desde Elementor → Herramientas → Regenerar CSS y datos.

Limpia la caché de tu sitio web y revisa cómo está cargando ahora tanto la cabecera como el submenú. 

Pruébalo y nos comentas cómo ha ido todo.

Un saludo. 

Ahora si lo unico el desplegable se quedo con la cuva ahi donde le marco, las de abajo esta bien pero arriba no queda bien, sabria como ponerlas rectas?

Disculpa, acabo de ver que también en la versión móvil hay que solucionar el fondo, porque cuando le pongo el código que me has pasado funciona salvo en la parte del desplegable donde se ven las categorías del menú principal, cuando despliegas la categoría si se ve bien, pero en las principales el fondo no se ve correcto

Hola Lourdes,

Prueba cambiar en el código:

border-radius: 22px !important;

y lo cambias a esto:

border-radius: 0 0 22px 22px !important;

Luego con respecto a la version mpovil verifica con esto:

@media (max-width: 767px) {

    /* Categorías principales del menú */

    selector .e-n-menu-title {

        background: rgba(120, 98, 82, 0.28) !important;

        backdrop-filter: blur(24px) !important;

        -webkit-backdrop-filter: blur(24px) !important;

        border-radius: 0 !important;

        box-shadow: inset 0 -1px rgba(255, 255, 255, 0.18);

    }

    /* Evita que Elementor coloque otro fondo encima */

    selector .e-n-menu-title-container,

    selector .e-n-menu-dropdown-icon {

        background: transparent !important;

        border-radius: 0 !important;

    }

}

Verifica y nos comentas.

Un saludo 

Ahora se visualiza asi. Lo otro se corrigio gracias

Hola Lourdes,

Nos puedes comentar cómo quieres que se vea? De esta forma podemos verificar un código CSS que sea acorde a lo que buscas.

Un saludo 🖐️ 

Sí claro. El problema es que ahora el fondo se ve con unas franjas. Quiero el fondo completo con ese efecto sin franjas.  No sé si se aprecian en la foto pero en la versión móvil se ve claramente que en lugar de ser todo el contenedor son solamente franjas que van detrás de las secciones del menú y debería ser el efecto en toda esa sección

Hola Lourdes,

Trata eliminando el código que te compartió Karen al final del todo, es decir, este:

Luego con respecto a la version mpovil verifica con esto:

Y lo cambias por este otro:

@media (max-width: 767px) {

/* Contenedor completo del menú principal */
selector .e-n-menu-wrapper {
position: relative;
background: transparent !important;
}

/* Una única capa de cristal para toda la sección */
selector .e-n-menu-wrapper::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;

background: rgba(120, 98, 82, 0.28);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);

border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 0 0 22px 22px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Contenido por encima de la capa de cristal */
selector .e-n-menu-heading {
position: relative;
z-index: 1;
background: transparent !important;
}

/* Elimina las franjas de cada elemento */
selector .e-n-menu-item,
selector .e-n-menu-title,
selector .e-n-menu-title-container,
selector .e-n-menu-dropdown-icon {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
}

Verifica y nos comentas.

Un saludo 

Solucionado! Gracias.

Hola Lourdes, 

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

Si es posible puedes valorar nuestras respuestas? esto nos ayuda a seguir mejorando. 

No dudes en escribirnos si tienes cualquier otra consulta. 

Un saludo. 😊