/* ============================================================ MOBILE MENU FIX - lmeducation.co.uk (shaper_oneclip) Problem 1: Blank screen on offcanvas open Cause: Helix3 JS adds ".offcanvas" class to , and Bootstrap 5 styles that same class with visibility:hidden + background:#fff => whole page invisible. Problem 2: Desktop horizontal menu visible on mobile Cause: markup uses old BS3 classes (hidden-sm hidden-xs) which no longer exist in Bootstrap 5. ============================================================ */ /* ---- Fix 1: neutralize Bootstrap-5 .offcanvas pollution on body ---- */ body.offcanvas { visibility: visible !important; background-color: transparent !important; background-clip: border-box !important; display: block !important; max-width: none !important; box-shadow: none !important; outline: 0 !important; z-index: auto !important; } /* ---- Fixes 2-5: mobile behaviour (< lg, same breakpoint as d-lg-none) ---- */ @media (max-width: 991.98px) { /* hide desktop horizontal mega menu */ #sp-menu .sp-megamenu-parent, .sp-megamenu-wrapper > .sp-megamenu-parent { display: none !important; } /* header column ka extra right-padding hatayo */ #sp-menu { padding-right: 12px !important; } /* hamburger: column ke right edge par align (template ka apna selector mirror kar ke) */ #sp-menu > .sp-column { display: -webkit-flex !important; display: flex !important; width: 100% !important; justify-content: flex-end !important; align-items: center !important; } #sp-menu > .sp-column .sp-megamenu-wrapper { flex: 0 0 auto !important; float: none; margin-right: 14px; } #offcanvas-toggler { margin-right: 0 !important; } #offcanvas-toggler > i { margin-right: 0 !important; } /* offcanvas panel: always above overlay when open */ body.offcanvas .offcanvas-menu { opacity: 1 !important; visibility: visible !important; right: 0 !important; z-index: 99999 !important; background-color: #10131c; } body.offcanvas .offcanvas-overlay { position: fixed !important; z-index: 99990 !important; background: rgba(0, 0, 0, 0.55) !important; } /* readable offcanvas links */ .offcanvas-menu .offcanvas-inner .sp-module ul > li a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.12); } .close-offcanvas { color: #fff; z-index: 2; } /* ---- Fix 5: logo ko zyada width (single line) + hamburger compact ---- */ #sp-logo { width: auto !important; -webkit-flex: 1 1 auto !important; flex: 1 1 auto !important; } #sp-menu { width: auto !important; -webkit-flex: 0 0 auto !important; flex: 0 0 auto !important; padding-right: 8px !important; } #sp-header .logo h1 { white-space: nowrap; } /* ---- Fix 4: logo text chhota + header me vertically center ---- template.css mobile media me "h1{font-size:38px !important}" logo ko bhi barha deta hai => ID specificity + !important */ #sp-header .logo { display: -webkit-flex !important; display: flex !important; align-items: center !important; height: auto !important; min-height: 76px; padding-top: 10px; box-sizing: border-box; } #sp-header .logo h1 { display: block !important; margin: 0; font-size: 16px !important; line-height: 1.3 !important; } }