/* Overlay */ .offcanvas-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); opacity: 0; transition: opacity .2s ease; z-index: 97; /* minore dello z-index della sidebar */ } /* Sidebar */ .offcanvas { position: fixed; top: 0; left: 0; height: 100vh; width: 300px; background: #000; box-shadow: 2px 0 20px rgba(0,0,0,.2); transform: translateX(-100%); transition: transform .25s ease; z-index: 98; /* sopra .offcanvas-overlay e sotto header */ &, ul, li, a, span { --color: #fff; --color-hover: #f1b000; --color-active: #f1b000; color: var(--color); } .is-active { color: var(--color-active) !important; } .offcanvas__body { display: flex; align-items: start; justify-content: start; flex-direction: column; height: 100%; padding: 1rem 0.5rem; overflow-y: auto; overflow-x: hidden; } } /* Stato aperto: via classe sul */ html.is-menu-open { overflow: hidden; .offcanvas-overlay { opacity: 1; } .offcanvas { transform: translateX(0); } .block-newcom-wizard fieldset#edit-wizard-right-mobile { z-index: 90; } }