diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 2331149c995..e44bb9643db 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -177,6 +177,19 @@ const SiteHeaderComponent = MountWidget.extend(
         this.docAt = header.offsetTop;
       }
 
+      const headerRect = header.getBoundingClientRect();
+      let headerOffsetCalc = headerRect.top + headerRect.height;
+
+      if (window.scrollY < 0) {
+        headerOffsetCalc += window.scrollY;
+      }
+
+      const newValue = `${headerOffsetCalc}px`;
+      if (newValue !== this.currentHeaderOffsetValue) {
+        this.currentHeaderOffsetValue = newValue;
+        document.documentElement.style.setProperty("--header-offset", newValue);
+      }
+
       const main = document.querySelector(".ember-application");
       const offsetTop = main ? main.offsetTop : 0;
       const offset = window.pageYOffset - offsetTop;