.elementor-1680 .elementor-element.elementor-element-61c93330{--display:flex;--position:fixed;--min-height:80px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.8;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}.elementor-1680 .elementor-element.elementor-element-61c93330::before, .elementor-1680 .elementor-element.elementor-element-61c93330 > .elementor-background-video-container::before, .elementor-1680 .elementor-element.elementor-element-61c93330 > .e-con-inner > .elementor-background-video-container::before, .elementor-1680 .elementor-element.elementor-element-61c93330 > .elementor-background-slideshow::before, .elementor-1680 .elementor-element.elementor-element-61c93330 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1680 .elementor-element.elementor-element-61c93330 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-e62d390 );--background-overlay:'';}.elementor-1680 .elementor-element.elementor-element-61c93330.e-con{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-1680 .elementor-element.elementor-element-61c93330{left:0px;}body.rtl .elementor-1680 .elementor-element.elementor-element-61c93330{right:0px;}.elementor-1680 .elementor-element.elementor-element-39a8ac50{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;}.elementor-1680 .elementor-element.elementor-element-39a8ac50::before, .elementor-1680 .elementor-element.elementor-element-39a8ac50 > .elementor-background-video-container::before, .elementor-1680 .elementor-element.elementor-element-39a8ac50 > .e-con-inner > .elementor-background-video-container::before, .elementor-1680 .elementor-element.elementor-element-39a8ac50 > .elementor-background-slideshow::before, .elementor-1680 .elementor-element.elementor-element-39a8ac50 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1680 .elementor-element.elementor-element-39a8ac50 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-1680 .elementor-element.elementor-element-39a8ac50.e-con{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-menu-toggle{margin:0 auto;background-color:var( --e-global-color-fafe0fb );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu .elementor-item{font-family:"Lora", Sans-serif;font-size:16px;font-weight:100;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--main .elementor-item:hover,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--main .elementor-item:focus{color:#FFFFFF;fill:#FFFFFF;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-fafe0fb );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .e--pointer-framed .elementor-item:before,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-fafe0fb );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad{--e-nav-menu-divider-content:"";--e-nav-menu-divider-style:solid;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a, .elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-menu-toggle{color:var( --e-global-color-e62d390 );fill:var( --e-global-color-e62d390 );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown{background-color:#FFFFFF;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a:hover,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a:focus,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a.highlighted,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-menu-toggle:hover,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-menu-toggle:focus{color:var( --e-global-color-text );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a:hover,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a:focus,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-nav-menu--dropdown a.highlighted{background-color:#767B6D6B;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad div.elementor-menu-toggle{color:var( --e-global-color-primary );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad div.elementor-menu-toggle svg{fill:var( --e-global-color-primary );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__close-button, .elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__close-button-custom{margin-left:auto;}.elementor-1680 .elementor-element.elementor-element-47f835ea.elementor-element{--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}.elementor-1680 .elementor-element.elementor-element-47f835ea{z-index:1009;--main-alignment:center;--side-cart-alignment-transform:translateX(100%);--side-cart-alignment-left:auto;--side-cart-alignment-right:0;--divider-style:solid;--subtotal-divider-style:solid;--checkout-button-display:none;--cart-footer-layout:1fr;--cart-buttons-position-margin:auto;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--toggle-button-border-width:0px;--toggle-button-border-radius:0px;--toggle-icon-size:26px;--cart-background-color:#FFFFFF;--cart-border-style:none;--cart-border-radius:0px 0px 0px 0px;--cart-close-icon-size:15px;--remove-item-button-size:22px;--remove-item-button-color:var( --e-global-color-accent );--menu-cart-subtotal-text-align:right;--product-price-color:var( --e-global-color-e62d390 );--divider-width:0px;--subtotal-divider-top-width:0px;--subtotal-divider-right-width:0px;--subtotal-divider-bottom-width:0px;--subtotal-divider-left-width:0px;--product-divider-gap:0px;--view-cart-button-background-color:var( --e-global-color-e62d390 );}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__subtotal{font-family:"Lora", Sans-serif;font-size:20px;font-weight:100;font-style:normal;}.elementor-1680 .elementor-element.elementor-element-47f835ea .widget_shopping_cart_content{--subtotal-divider-left-width:0px;--subtotal-divider-right-width:0px;--subtotal-divider-top-width:0px;--subtotal-divider-bottom-width:0px;--subtotal-divider-color:var( --e-global-color-e62d390 );}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__product-name a{font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:200;color:var( --e-global-color-text );}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__product .variation{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-family:"Lora", Sans-serif;font-size:20px;font-weight:100;font-style:normal;border-radius:33px 33px 33px 33px;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-1680 .elementor-element.elementor-element-1df9cfbd{width:var( --container-widget-width, 14.525% );max-width:14.525%;--container-widget-width:14.525%;--container-widget-flex-grow:0;text-align:center;}.elementor-1680 .elementor-element.elementor-element-1df9cfbd.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1680 .elementor-element.elementor-element-1df9cfbd img{width:100%;max-width:1000px;height:89px;object-fit:cover;object-position:center center;opacity:1;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-1680 .elementor-element.elementor-element-61c93330{--width:100%;}.elementor-1680 .elementor-element.elementor-element-39a8ac50{--width:75.265%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1680 .elementor-element.elementor-element-39a8ac50{--width:500px;}}@media(max-width:1024px){.elementor-1680 .elementor-element.elementor-element-61c93330{--min-height:0px;}.elementor-1680 .elementor-element.elementor-element-39a8ac50{--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad{width:var( --container-widget-width, 362.25px );max-width:362.25px;--container-widget-width:362.25px;--container-widget-flex-grow:0;}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-size:var( --e-global-typography-primary-font-size );}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__product .variation{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-1680 .elementor-element.elementor-element-1df9cfbd{width:var( --container-widget-width, 127.672px );max-width:127.672px;--container-widget-width:127.672px;--container-widget-flex-grow:0;}}@media(max-width:767px){.elementor-1680 .elementor-element.elementor-element-61c93330{--width:500px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--flex-wrap:nowrap;}.elementor-1680 .elementor-element.elementor-element-61c93330.e-con{--align-self:center;}.elementor-1680 .elementor-element.elementor-element-39a8ac50{--width:132.011px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:1;}.elementor-1680 .elementor-element.elementor-element-39a8ac50.e-con{--flex-grow:0;--flex-shrink:1;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-1680 .elementor-element.elementor-element-4eaee1ad > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad{--nav-menu-icon-size:22px;}.elementor-1680 .elementor-element.elementor-element-4eaee1ad .elementor-menu-toggle{border-width:1px;border-radius:11px;}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-size:var( --e-global-typography-primary-font-size );}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__product-name a{font-size:15px;}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__product .variation{font-size:var( --e-global-typography-text-font-size );}.elementor-1680 .elementor-element.elementor-element-47f835ea{--divider-width:1px;--subtotal-divider-top-width:1px;--subtotal-divider-right-width:1px;--subtotal-divider-bottom-width:1px;--subtotal-divider-left-width:1px;--product-divider-gap:10px;}.elementor-1680 .elementor-element.elementor-element-47f835ea .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-size:13px;}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-1680 .elementor-element.elementor-element-1df9cfbd{width:var( --container-widget-width, 133.96px );max-width:133.96px;--container-widget-width:133.96px;--container-widget-flex-grow:0;}.elementor-1680 .elementor-element.elementor-element-1df9cfbd.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-1680 .elementor-element.elementor-element-1df9cfbd img{width:100%;}}/* Start custom CSS for nav-menu, class: .elementor-element-4eaee1ad */Código del Menú para ElementorEste archivo contiene las tres partes de código (HTML, CSS, JavaScript) que necesitas para integrar el menú en tu página de Elementor.Paso 1: Pegar en el Widget de HTMLCopia y pega este código en el Widget de HTML de Elementor. Este es el código de la estructura del menú.
Paso 2: Pegar en el CSS PersonalizadoCopia todo este código CSS y pégalo en el panel de "CSS Personalizado" de Elementor.body {
font-family: 'Lora', serif;
background-color: #f0f8ff;
}
#sidebar {
width: 280px;
height: 100vh;
position: fixed;
top: 0;
left: -280px;
background-color: rgba(66, 74, 54, 0.7);
color: #F5F5DC;
transition: left 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1000;
overflow-y: auto;
border-right: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
flex-direction: column;
padding: 1.5rem;
}
#sidebar.open {
left: 0;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#overlay.visible {
opacity: 1;
visibility: visible;
}
#main-content {
padding: 2rem;
transition: filter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background-image: url('[https://images.unsplash.com/photo-1542838138-0248a8047055?q=80&w=2670&auto=format&fit=crop](https://images.unsplash.com/photo-1542838138-0248a8047055?q=80&w=2670&auto=format&fit=crop)');
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
}
body.shifted #main-content {
filter: blur(5px);
}
#menu-toggle {
transition: all 0.2s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#menu-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#menu-toggle:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.submenu {
display: none;
overflow: hidden;
transition: height 0.3s ease;
}
.submenu.open {
display: block;
}
.submenu-toggle .submenu-arrow {
transform: rotate(0deg);
}
.submenu-toggle.rotated .submenu-arrow {
transform: rotate(90deg);
}
@media (min-width: 1024px) {
#sidebar {
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: rgba(66, 74, 54, 0.9);
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: none;
}
#sidebar h2, #sidebar button {
display: none;
}
#sidebar nav {
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
margin-left: auto;
padding-right: 1.5rem;
}
#sidebar nav > div {
display: flex;
flex-direction: row;
align-items: center;
}
#sidebar nav > div > .group {
position: relative;
}
#sidebar nav > div > a, #sidebar .submenu-toggle {
padding: 1rem 0.5rem;
border-radius: 0;
}
#sidebar .submenu {
position: absolute;
top: 100%;
left: 0;
background-color: rgba(66, 74, 54, 0.95);
min-width: 200px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1001;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#sidebar .submenu-toggle .submenu-arrow {
transform: rotate(0deg);
margin-left: 0.5rem;
}
#sidebar .submenu-toggle.rotated .submenu-arrow {
transform: rotate(180deg);
}
#main-content {
padding-top: calc(88px + 2rem);
transition: none;
}
#menu-toggle {
display: none;
}
#overlay {
display: none;
}
body.shifted #main-content {
filter: none;
}
}
Paso 3: Pegar en el JavaScriptCopia todo este código JavaScript y pégalo en la sección de "Código personalizado" de Elementor Pro o con un plugin como "Code Snippets".document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.getElementById('menu-toggle');
const closeMenu = document.getElementById('close-menu');
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
const body = document.body;
const submenuToggles = document.querySelectorAll('.submenu-toggle');
const openMenu = () => {
sidebar.classList.add('open');
overlay.classList.add('visible');
body.classList.add('shifted');
};
const closeMenuFunc = () => {
sidebar.classList.remove('open');
overlay.classList.remove('visible');
body.classList.remove('shifted');
};
menuToggle.addEventListener('click', openMenu);
closeMenu.addEventListener('click', closeMenuFunc);
overlay.addEventListener('click', closeMenuFunc);
submenuToggles.forEach(toggle => {
toggle.addEventListener('click', (e) => {
e.preventDefault();
const isDesktop = window.matchMedia("(min-width: 1024px)").matches;
submenuToggles.forEach(otherToggle => {
if (otherToggle !== toggle && otherToggle.nextElementSibling.classList.contains('open')) {
otherToggle.nextElementSibling.classList.remove('open');
otherToggle.querySelector('.submenu-arrow').classList.remove('rotated');
}
});
const submenu = toggle.nextElementSibling;
const arrow = toggle.querySelector('.submenu-arrow');
submenu.classList.toggle('open');
arrow.classList.toggle('rotated');
});
});
document.addEventListener('click', (e) => {
const isDesktop = window.matchMedia("(min-width: 1024px)").matches;
if (isDesktop && !e.target.closest('#sidebar')) {
submenuToggles.forEach(toggle => {
const submenu = toggle.nextElementSibling;
const arrow = toggle.querySelector('.submenu-arrow');
submenu.classList.remove('open');
arrow.classList.remove('rotated');
});
}
});
let touchstartX = 0;
let touchendX = 0;
const handleGesture = () => {
const isMobile = window.matchMedia("(max-width: 1023px)").matches;
if (!isMobile) return;
if (touchendX > touchstartX + 50 && !sidebar.classList.contains('open')) {
openMenu();
}
if (touchendX < touchstartX - 50 && sidebar.classList.contains('open')) {
closeMenuFunc();
}
};
document.addEventListener('touchstart', e => {
touchstartX = e.changedTouches[0].screenX;
});
document.addEventListener('touchend', e => {
touchendX = e.changedTouches[0].screenX;
handleGesture();
});
});
/* Sobrescribe la transparencia y el desenfoque del Menú Móvil Desplegable */
@media (max-width: 1024px) { /* Esto asegura que solo afecte a tablets y móviles */
.elementor-nav-menu--dropdown {
/* Fuerza un color de fondo SÓLIDO (ej. Blanco) */
background-color: #FFFFFF !important;
/* Elimina el efecto de Glassmorphism (desenfoque) */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* Asegura que cubra todo el contenido */
opacity: 1 !important;
}
}/* End custom CSS */