diff --git a/client/src/components/Header/index.js b/client/src/components/Header/index.js
index a70f7ffab5..9b13cda122 100644
--- a/client/src/components/Header/index.js
+++ b/client/src/components/Header/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
 import SearchBar from '../search/searchBar/SearchBar';
 
 import NavigationMenu from './components/NavMenu';
@@ -15,15 +16,20 @@ const propTypes = {
 function Header(props) {
   const { disableSettings } = props;
   return (
-    <header>
-      <nav id='top-nav'>
-        <Link className='home-link' to='/'>
-          <NavLogo />
-        </Link>
-        <SearchBar />
-        <NavigationMenu disableSettings={disableSettings} />
-      </nav>
-    </header>
+    <>
+      <Helmet>
+        <style>{':root{--header-height: 38px}'}</style>
+      </Helmet>
+      <header>
+        <nav id='top-nav'>
+          <Link className='home-link' to='/'>
+            <NavLogo />
+          </Link>
+          <SearchBar />
+          <NavigationMenu disableSettings={disableSettings} />
+        </nav>
+      </header>
+    </>
   );
 }
 
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 1b3a8b722f..6546c72a5f 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -15,12 +15,11 @@ body {
 }
 
 .default-layout {
-  margin-top: var(--header-height);
+  margin-top: var(--header-height, 0px);
   background: var(--secondary-background);
   display: flex;
   flex-direction: column;
-  margin-top: var(--header-height);
-  min-height: calc(100vh - var(--header-height));
+  min-height: calc(100vh - var(--header-height, 0px));
 }
 
 h1 {
diff --git a/client/src/components/layouts/learn.css b/client/src/components/layouts/learn.css
index d1c2e8067d..ed06dde0c5 100644
--- a/client/src/components/layouts/learn.css
+++ b/client/src/components/layouts/learn.css
@@ -1,5 +1,5 @@
 #learn-app-wrapper .desktop-layout {
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--header-height, 0px));
 }
 
 #learn-app-wrapper .reflex-container.vertical > .reflex-splitter,
diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css
index cc260f4a9b..5ee0bb4211 100644
--- a/client/src/components/layouts/variables.css
+++ b/client/src/components/layouts/variables.css
@@ -1,5 +1,4 @@
 :root {
-  --header-height: 38px;
   --theme-color: #0a0a23;
   --gray-00: #ffffff;
   --gray-05: #f5f6f7;
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 835684d216..4f735f20a9 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -26,7 +26,7 @@
 }
 
 #challenge-page-tabs .tab-content {
-  height: calc(100vh - var(--header-height) - 69px);
+  height: calc(100vh - var(--header-height, 0px) - 69px);
   overflow-y: auto;
 }