/* ========================================================================== Sticky header .rbnav was already sticky, but .nav (homepage, How it works, Contact) was not, so the menu scrolled away on those pages. This makes every header behave the same on desktop and on phones. ========================================================================== */ .nav, header.nav, .rbnav, header.rbnav { position: sticky; top: 0; z-index: 1000; /* iOS needs the header promoted, otherwise it can flicker while scrolling */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* The homepage header sits on white, so give it a real surface once it lifts off the top of the page. */ .nav { background: #fff; } /* Anything the page pins under the header must clear it. */ .nav ~ *, .rbnav ~ * { scroll-margin-top: 76px; } /* Anchor targets shouldn't hide behind the bar when you jump to them. */ [id] { scroll-margin-top: 84px; } @media (max-width: 820px) { [id] { scroll-margin-top: 72px; } } /* A sticky bar and a full-height mobile drawer must not fight each other: the drawer always wins. */ .mmenu, .mmenu-scrim, .glm-overlay { z-index: 5000; } /* -------------------------------------------------------------------------- overflow-x:hidden on html/body makes them a scroll container, which silently breaks position:sticky. `clip` stops the same sideways scroll WITHOUT creating that container, so the header keeps sticking. Only overflow-x is set, so vertical scrolling is untouched (that pairing on is the combination that breaks Safari). -------------------------------------------------------------------------- */ @supports (overflow: clip) { html { overflow-x: clip !important; } body { overflow-x: clip !important; } }