@charset "utf-8"; /* ========================================================================== site-fixes.css - loaded last, after style.css. Corrections to the sticky header/menu that the vendor's stylesheet gets wrong. Everything here is scoped to .body-fx (the class the sticky script puts on once the page is scrolled) so nothing else is affected. The three faults being corrected: 1. #HeaderControl and #MenuControl both switch to position:fixed at the same moment, so ~152px of layout leaves the document flow at once and every page jumps upward under the bars. #sticky-spacer fills the gap. 2. style.css gives #HeaderControl z-index:99 but leaves #MenuControl at auto (0), so any positioned page section paints over the menu bar - which made the navigation look truncated. Both now sit on Bootstrap's fixed-element layer. 3. The pinned header was rgba(254,254,254,.95), so page text scrolling underneath ghosted through it. ========================================================================== */ #sticky-spacer { height: 0; } body.body-fx #HeaderControl { background: #fff !important; /* was 95% opaque - content showed through */ z-index: 1030 !important; /* Bootstrap's fixed-top layer */ height: auto !important; /* was clipped to a hard 110px */ box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } body.body-fx #MenuControl { z-index: 1029 !important; /* was auto - page content painted over it */ background: #1072bb !important; /* match the menu bar's own blue */ top: var(--sticky-header-height, 110px) !important; } /* The floating side widgets must stay clear of the pinned bars. */ body.body-fx .quick-btn { z-index: 1028; } /* Below the Bootstrap md breakpoint the header is far too tall to pin - it would eat most of a phone screen, and the open hamburger menu needs the room. The sticky script also refuses to engage under 992px; this is the belt-and-braces half of that. */ @media (max-width: 991.98px) { body.body-fx #HeaderControl, body.body-fx #MenuControl { position: static !important; top: auto !important; height: auto !important; box-shadow: none; } #sticky-spacer { height: 0 !important; } }