/* LP Sticky Header — the white nav row stays pinned while the page scrolls. * --------------------------------------------------------------------------- * EVERY rule is scoped to html.lpsticky-on. With the feature dormant this file * matches nothing at all, so it is safe to ship to live and leave off. * * px only. This site sets html to 11.52px, so 1rem is 11.52px here, not 16px — * a rem value copied from anywhere else lands at 72% of its intended size. * * WHAT STICKS AND WHAT DOES NOT * body * .lp-bogo-bar blue "2 for 1 sale" strip → scrolls away * header#topHeader * .adv-banner blue "Up to 50% Off" strip → scrolls away * #mobile-search-drawer search drawer (mobile) → sticks only when open * nav.navbar THE NAV ROW → STICKS * [help bar] grey "Need help?" strip → scrolls away * * HOW, without touching the markup: header#topHeader is the sticky element and * its `top` is NEGATIVE — minus the height of everything above the nav row * inside it. The header therefore pins at the moment the blue .adv-banner has * scrolled exactly out of sight, leaving the nav row flush against the top. * Sticking the nav itself instead would only hold it for the height of the * header, because a sticky element can never escape its own parent's box. */ html.lpsticky-on #topHeader.site-header { position: -webkit-sticky; position: sticky; top: calc(0px - var(--lpsticky-above, 0px)); z-index: 9990; } /* White ground. Invisible today (the page behind is white) — it exists so the * bar is opaque over product cards, tables and the black trust marquee once it * is actually floating above content. */ html.lpsticky-on #topHeader.site-header > .navbar { background: #fff; } /* The only visual change in the whole feature, and only once pinned. * * ⛔ The hairline is the FIRST box-shadow, never a border-bottom. A border adds * 1px to the header's height the instant it sticks, and because a sticky * element is still in normal flow that 1px shoves the entire page down — * a visible twitch at the exact moment the user starts scrolling. */ html.lpsticky-on.lpsticky-stuck #topHeader.site-header > .navbar { box-shadow: 0 1px 0 #e3e9ed, 0 2px 12px rgba(8, 15, 28, 0.07); } /* In-page anchors must not land underneath the bar: /about/#samuel, the PDP * tab links, the COA jump links. The value is the measured nav height plus a * little air, written by the JS. */ html.lpsticky-on :where([id]) { scroll-margin-top: calc(var(--lpsticky-navh, 0px) + 12px); } /* --------------------------------------------------------------------------- * FALLBACK: position:fixed. * * NOT hypothetical on this site. The catalog gate (off-canvas popup 21895, * "Access Our Full Peptide Catalog") opens on load for logged-out visitors and * locks the page by putting `overflow:hidden` inline on . Measured on * live: with that lock in place position:sticky silently stops holding and the * nav row scrolls away. Most first-time visitors see that gate, so the * fallback is the common path, not the rare one. * * (body's own `overflow-x:hidden`, which this theme has always had, is NOT a * problem: with left visible the browser propagates body's overflow to * the viewport and body behaves as visible. The JS knows that rule and does * not trip on it.) * * The whole header is fixed, not just the nav row, and with the same negative * top — so the mobile search drawer, which sits between the blue banner and * the nav row, stays attached to the bar instead of being left behind on the * page. A spacer of the header's measured height holds its place in the flow. * --------------------------------------------------------------------------- */ html.lpsticky-on.lpsticky-fixmode #topHeader.site-header { position: static; z-index: auto; } html.lpsticky-on.lpsticky-fixmode.lpsticky-stuck #topHeader.site-header { position: fixed; top: calc(0px - var(--lpsticky-above, 0px)); left: 0; right: 0; width: 100%; z-index: 9990; background: #fff; } html.lpsticky-on .lpsticky-spacer { display: none; } html.lpsticky-on.lpsticky-fixmode.lpsticky-stuck .lpsticky-spacer { display: block; height: var(--lpsticky-headerh, 0px); }