/* * AlternativeBeauty – Mobile Navigation UX Fixes (Issue 3) – v1.1 * Scope: Mobile only (<= 768px). Desktop remains unchanged. */ @media (max-width: 767.98px) { /* --- Off‑canvas panel sizing & stacking (JetMenu / Elementor / generic) --- */ .jet-menu-mobile-panel, .jet-mobile-menu__container, .jet-mobile-menu, .elementor-nav-menu--dropdown, .site-offcanvas, .mobile-drawer, .offcanvas, .drawer, .e-n-menu__dropdown { /* Elementor's new nested menu */ max-width: 100vw; width: min(100vw, 420px); height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* stop scroll chaining to body */ z-index: 99999 !important; /* always above page UI */ background: var(--e-global-color-primary-bg, #fff); } /* --- Overlay (real node added by JS) --- */ .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 99995; /* below panel, above page */ } body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .nav-overlay { transition: none; } } /* Jet/Cosmetro/Elementor overlays if plugin already inserts them */ .jet-menu-cover, .jet-mobile-menu__backdrop, .elementor-popup-modal .dialog-widget-overlay { background: rgba(0,0,0,.5) !important; z-index: 99995 !important; } /* --- While menu is open, silence background UI (carousels, etc.) --- */ body.nav-open .elementor-swiper-button, body.nav-open .swiper-button, body.nav-open .swiper-button-next, body.nav-open .swiper-button-prev, body.nav-open .jet-woo-swiper__button { pointer-events: none !important; opacity: .25; } /* --- Hit areas & focus states inside the off‑canvas --- */ .jet-mobile-menu__container .menu-item > a, .jet-menu-mobile-panel .menu-item > a, .elementor-nav-menu--dropdown .menu-item > a, .e-n-menu__dropdown .menu-item > a { min-height: 48px; /* Thumb-friendly */ display: flex; align-items: center; font-size: clamp(16px, 3.6vw, 18px); } /* Submenu toggles (arrows) */ .jet-mobile-menu__toggle, .jet-menu .sub-arrow, .elementor-nav-menu--dropdown .sub-arrow, .e-n-menu__toggle { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; } /* Keyboard/touch focus visibility */ .jet-menu a:focus-visible, .jet-mobile-menu__container a:focus-visible, .elementor-nav-menu--dropdown a:focus-visible, .e-n-menu__dropdown a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; background: rgba(0,0,0,.06); border-radius: 4px; } /* --- Sticky bars: avoid stacking on mobile (default) --- */ .woocommerce-store-notice, .sitewide-notice, .announce-bar, .free-shipping-bar { font-size: 13px; line-height: 1.25; padding: 8px 12px; z-index: 99990 !important; position: static !important; /* keep only header sticky */ } /* Safety: no background horizontal scroll */ html, body { overflow-x: clip; } } /* ===== Optional (OFF by default): sticky bars offset under header ===== To enable: 1) Add class "abmn-offset" to (via theme hook or snippet) 2) Uncomment the JS "setHeaderOffset" lines in mobile-nav.js --------------------------------------------------------------------------- @media (max-width: 767.98px) { .abmn-offset .woocommerce-store-notice, .abmn-offset .sitewide-notice, .abmn-offset .announce-bar, .abmn-offset .free-shipping-bar { top: var(--abmn-header-h, 56px) !important; position: sticky !important; } } */