/* =============================== FORCE HAMBURGER ON DESKTOP TOO (apply mobile styles always) ================================ */ /* 1) Mostrar botón hamburguesa siempre */ .menu-toggle{ background:#000; color:#fff; border:none; cursor:pointer; z-index:10000; position:relative; padding:10px 7px; } /* 2) Wrapper del menú como overlay SIEMPRE */ .custom-menu-wrapper{ display:flex ; position:fixed; top:0; left:0; right:0; z-index:9999; padding:20px; flex-direction:column; transition:transform .3s ease-in-out; height:100vh; justify-content: center; background-color: #043A2C; background-image: url(../img/footer_bg.svg); background-repeat: repeat; background-size: 490px auto; align-items: center; } /* Estado cerrado (igual que mobile según data-animation) */ .custom-menu-wrapper[data-animation="top"]{ transform:translateX(0) translateY(-100%); } .custom-menu-wrapper[data-animation="left"]{ transform:translateX(-100%) translateY(0); } .custom-menu-wrapper[data-animation="right"]{ transform:translateX(100%) translateY(0); } /* Estado abierto */ .custom-menu-wrapper.open{ transform:translateX(0) translateY(0) ; overflow-y:auto; } /****** Logo menu ****/ .custom-menu-wrapper .menu__logo { width: 130px; height: 130px; background-repeat: no-repeat; background-image: url(../img/logo-diener.svg); } /* 3) Menú en columna siempre */ .desktop-menu{ display:block ; justify-content:flex-start ; } .desktop-menu ul{ display:flex; flex-direction:column; list-style: none; margin: 0; padding: 0; align-items: center; gap: 18px; } /* 4) Ocultar/mostrar el menú con la clase en */ .desktop-menu{ display:none ; } html.menu__opened .desktop-menu{ display:block ; padding-top:40px; padding-bottom:80px; } /* 5) Quitar comportamiento hover de desktop para submenús */ .desktop-menu ul.menu > li.menu-item-has-children:hover > ul.sub-menu{ display:none ; } .desktop-menu > ul.menu > li.menu-item-has-children:hover > ul.sub-menu:before{ display:none ; } /* 6) Submenús estilo mobile siempre */ .desktop-menu ul.sub-menu{ position:relative ; background:none ; } .desktop-menu ul.menu ul.sub-menu{ position:initial ; box-shadow:none ; } li.menu__servicios > ul.sub-menu{ width:auto ; flex-direction:column ; flex-wrap:nowrap ; } li.menu__servicios ul.sub-menu > li{ width:auto ; } .desktop-menu ul.menu li.menu-item-has-children ul.sub-menu{ text-align:left; padding-top:0; padding-left:10px; margin-left:20px; min-height:auto; } ul.sub-menu ul.sub-menu{ width:auto ; position:initial ; } /* 7) Flechitas activas (para tu JS) siempre */ .custom-menu-text{ display:block ; } ul.sub-menu li.menu-item-has-children{ flex-direction:column; align-items:flex-start; } ul.sub-menu li.menu-item-has-children > span.submenu__arrow{ display:inline-block ; width:12px; height:12px; background-repeat:no-repeat; background-position:center; background-image:url(../img/icon-down.svg); background-size:100%; margin-left:10px; } ul.menu > li.menu-item-has-children > span.submenu__arrow{ width:12px; height:12px; margin-left:15px; display:inline-block ; } /**** Menu hamburguesa ****/ .hamburger-lines { height: 40px; width: 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 4px; } .hamburger-lines .line { display: block; height: 2px; width: 100%; border-radius: 5px; background: #FFF; } .hamburger-lines .line1 { transition: transform 0.4s ease-in-out; } .hamburger-lines .line2 { transition: transform 0.2s ease-in-out; } .hamburger-lines .line3 { transition: transform 0.4s ease-in-out; } /* Hamburguesa abierto */ .menu__opened .hamburger-lines { background-color: #DED7C6 !important; justify-content:center; } .menu__opened .hamburger-lines .line{ background-color: #043A2C !important; position: absolute; width: 20px; } .menu__opened .hamburger-lines .line1 { transform: rotate(45deg); } .menu__opened .hamburger-lines .line2 { transform: scaleY(0); } .menu__opened .hamburger-lines .line3 { transform: rotate(-45deg); }