diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 8bc7bd714fc..71cd70a4a3a 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -183,19 +183,6 @@ 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("#main");
       const offsetTop = main ? main.offsetTop : 0;
       const offset = window.pageYOffset - offsetTop;
diff --git a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js b/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
index 246fd35357b..5be14b861b2 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
@@ -1,6 +1,6 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { click, render } from "@ember/test-helpers";
+import { click, render, waitUntil } from "@ember/test-helpers";
 import { count, exists, query } from "discourse/tests/helpers/qunit-helpers";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import { hbs } from "ember-cli-htmlbars";
@@ -83,4 +83,22 @@ module("Integration | Component | site-header", function (hooks) {
     await click("header.d-header");
     assert.ok(!exists(".user-menu.revamped"));
   });
+
+  test("header's height is setting css property", async function (assert) {
+    await render(hbs`<SiteHeader />`);
+
+    function getProperty() {
+      return getComputedStyle(document.body).getPropertyValue(
+        "--header-offset"
+      );
+    }
+
+    document.querySelector(".d-header").style.height = 90 + "px";
+    await waitUntil(() => getProperty() === "90px", { timeout: 100 });
+    assert.strictEqual(getProperty(), "90px");
+
+    document.querySelector(".d-header").style.height = 60 + "px";
+    await waitUntil(() => getProperty() === "60px", { timeout: 100 });
+    assert.strictEqual(getProperty(), "60px");
+  });
 });