/* ============================================================ JSB — site-wide sticky public header (Astra theme, CSS only) Enqueued on every front-end page by the JSB Resources Hub plugin. No theme files are edited; the header element is never cloned. ============================================================ */ /* Astra (free) sets body{overflow-x:hidden} and the child theme also sets html{overflow-x:hidden}. overflow-x on makes a scroll container, which silently disables position:sticky on the header. Fix: keep the horizontal clipping on (so no horizontal page scrollbar can appear) and restore a scrollable so sticky works on every page and every viewport size. */ html { overflow-x: hidden; } body { overflow-x: visible !important; } /* The whole public header (logo + nav + mobile bar + mobile dropdown) sticks to the top of the viewport. position:sticky keeps the header in normal document flow, so no content jump / layout shift on load. */ #masthead, .site-header { position: sticky !important; top: 0 !important; z-index: 9999 !important; width: 100%; left: 0; right: 0; } /* Logged-in: keep the sticky header just below the WP admin bar. */ body.admin-bar #masthead, body.admin-bar .site-header { top: 32px !important; } @media (max-width: 782px) { body.admin-bar #masthead, body.admin-bar .site-header { top: 46px !important; } } /* WP core (wp-includes/css/admin-bar.css) switches #wpadminbar to position:absolute at <=600px ("Smartphone") so the bar scrolls away with the page, while html keeps margin-top:46px and the masthead stays sticky at top:46px - leaving a ~46px strip of page content visible ABOVE the nav once scrolled (the "floating nav" bug). Fix: pin the admin bar back to position:fixed at every breakpoint (exactly WPs own behavior above 600px) so the sticky masthead always sits flush below the admin bar; nothing can float above it. Guests (no admin bar) are unaffected - masthead stays top:0. */ @media (max-width: 600px) { #wpadminbar { position: fixed !important; } } /* Dropdown menus / mobile menu live inside #masthead; they inherit the header's own stacking context (z-index 9999 < admin bar's 99999), so they always paint above page content but never above the admin bar. */ #ast-desktop-header, #ast-mobile-header { position: relative; z-index: 9999; } /* ============================================================ Top white-gap above the sticky header (site-wide, CSS only) ------------------------------------------------------------ The page templates emit whitespace-only text nodes directly inside (before the skip-link / #page). Browsers lay those out as an anonymous line box at the very top of whose height equals body's line-height (26.4px desktop, 24.1px on narrow viewports) — the white strip above the header. body::first-line collapses ONLY that first, invisible line to 0 height. Specificity (0,0,2) beats the theme's body rule, and because body's first line contains only whitespace, no visible text, page height or hero layout is affected. Verified at 1280px and 390px on every public page (home, contact, product hub, resources, why, how-it-works, services). ============================================================ */ body::first-line { line-height: 0 !important; } /* ============================================================ Mobile footer grid fix (site-wide, CSS only) ------------------------------------------------------------ Every page ships an inline