diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index 2ac14169e0..de88b18dcf 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -450,6 +450,6 @@ body.detected-mobile {
 
 // Some utilities for the sticky nav behaviour.
 // Note: this will not be applied if a navigation menu open.
-.translate-y-0:not(:has(.show)) {
+.translate-y-0 {
   transform: translateY(-235px);
 }
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index 2d03fa4d45..cf34ab5749 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -359,14 +359,24 @@
     <% /* Sticky header */ %>
     <script>
         var lastScrollTop = 0;
-        var header = document.querySelector('.header')
+        var header = document.querySelector('[purpose="header-container"]');
+        let mobileNavMenu = document.querySelector('[purpose="mobile-nav"]');
         window.addEventListener('scroll', windowScrolled);
         function windowScrolled() {
+          if(!header || !mobileNavMenu){
+            return;
+          }
+          let isMobileNavOpen = [...mobileNavMenu.classList].includes('show');
+          if(isMobileNavOpen) {
+            return;
+          }
           let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
           if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
+            // If the user scrolls 1.5x the height of their browser window, hide the page header.
             header.classList.add('translate-y-0');
             lastScrollTop = scrollTop;
           } else if(scrollTop < lastScrollTop - 60) {
+            // If the user scrolls 60 pixels upwards on the screen, we'll show the page header
             header.classList.remove('translate-y-0');
             lastScrollTop = scrollTop;
           }