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 @@
});
});
-