/* * Homepage (new-frontend.blade.php) mobile-menu fixes. * * The homepage uses the SAME shared header/footer partial as the Bootstrap * pages, but renders it UNSCOPED with custom.css + custom.js (no .provis-chrome * wrapper). The equivalent fixes for the scoped pages live in scope-chrome-css.js * (baked into chrome.css). These are the unscoped twins so the mobile menu * behaves identically on the homepage. * * custom.js toggles `mobile-menu-open` on , so the icon swap keys off that. */ /* Hidden mega-menu dropdowns are position:static + visibility:hidden on mobile, so each collapsed submenu reserved its full height -> long empty scroll. Collapse them; the .show toggle (custom.js) re-displays the open one. */ @media (max-width: 1023px) { .mega-menu-item .mega-menu { display: none !important; } .mega-menu-item .mega-menu.show { display: block !important; } } /* On touch the :hover sticks after a tap, leaving a full-width green bar on the last-tapped nav item. Drop the hover background inside the mobile drawer. */ @media (max-width: 1023px) { .main-menu .nav-link:hover { background-color: transparent !important; } } /* #collapseMenu has a Tailwind before: backdrop (fixed inset-0 black, z-50) that painted over the header's own logo + Book A Meeting. custom.js injects its own overlay, so kill this redundant one. */ @media (max-width: 1023px) { #collapseMenu::before { display: none !important; content: none !important; } } /* Offset the open drawer below the header bar. #collapseMenu is the fixed, full-screen drawer (top:0) with transform:translate(0), so it's the containing block for the fixed