diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less index c635103917..ce8ad80ef3 100644 --- a/website/assets/styles/layout.less +++ b/website/assets/styles/layout.less @@ -17,6 +17,11 @@ html, body { } [purpose='page-header'] { + // rules for sticky nav transitions + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + // Mobile navigation menu [purpose='mobile-nav'] { position: fixed; @@ -103,9 +108,19 @@ html, body { } } // Homepage header styles &.homepage-header { - position: absolute; + z-index: 9999; + position: fixed; + top: 0; left: 0; right: 0; + &.sticky { + background-color: #fff; + [purpose='header-nav'] { + a { + color: #192147; + } + } + } [purpose='header-btn'] { color: #ffffff; cursor: unset; @@ -122,10 +137,14 @@ html, body { } } // Non-homepage header styles &.header { - left: 0; - right: 0; - border-bottom: 1px solid #e2e4ea; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + left: 0; + right: 0; + // border-bottom: 1px solid #e2e4ea; + // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + z-index: 9999; + position: sticky; + top: 0; + background-color: #fff; .current-page { color: #6a67fe; svg { @@ -245,3 +264,8 @@ body.detected-mobile { } } } + +// Some utilities for the sticky nav behaviour +.translate-y-0 { + transform: translateY(-95px); +} diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index a121347889..8535983f43 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -283,29 +283,40 @@ <%/* Stripe.js */%> - <%/* Linkedin Ads Insight tag */%> - - - <% /* Delete the global `self` to help avoid client-side bugs. (see https://developer.mozilla.org/en-US/docs/Web/API/Window/self) */ %> + <% /* Sticky header */ %> + + <%/* bowser.js (for browser detection) -- included inline to avoid issues with minification that could affect the unsupported browser overlay */%> @@ -454,6 +465,5 @@ }); }); -