diff --git a/packages/docs/src/components/header/header.css b/packages/docs/src/components/header/header.css
index 2585fd99b86..aad35ad6bad 100644
--- a/packages/docs/src/components/header/header.css
+++ b/packages/docs/src/components/header/header.css
@@ -1,7 +1,16 @@
 header {
+  height: calc(var(--header-height));
+  margin-bottom: 6px;
   color: white;
   background: var(--qwik-blue);
-  box-shadow: 0px 2px 7px #0000003d;
+  box-shadow: 0px 2px 5px #0000003d;
+}
+
+.fixed-header header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 40;
 }
 
 header li {
@@ -17,9 +26,15 @@ header li a:hover svg {
   opacity: 0.8;
 }
 
+header .mobile-menu {
+  position: absolute;
+  right: 0;
+  @apply p-3 md:hidden;
+}
+
 header ul {
   @apply hidden md:block;
-  @apply pt-14 pb-6 md:pt-0;
+  @apply pt-0 pb-6 md:pt-0;
 }
 
 header .more-icon {
@@ -32,8 +47,12 @@ header .close-icon {
 
 @media (max-width: 767px) {
   .header-open header ul {
+    position: absolute;
+    z-index: 10;
     display: block;
-    background: #0099ff;
+    top: var(--header-height);
+    width: 100%;
+    background: var(--qwik-blue);
   }
 
   .header-open header .more-icon {
@@ -46,17 +65,22 @@ header .close-icon {
 }
 
 header .header-inner {
-  @apply max-w-[1400px] mx-auto;
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .full-width header .header-inner {
-  @apply max-w-[100%];
+  max-width: 100%;
 }
 
 header .header-logo {
-  @apply fixed top-[5px] left-[max(0px,calc(50%-45rem))] pl-4;
+  position: absolute;
+  top: 5px;
+  left: max(0px, calc(50% - 45rem));
+  padding-left: 1rem;
 }
 
 .full-width header .header-logo {
-  @apply left-[0px];
+  left: 0;
 }
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 686f8ce903b..b46aaeb4cb5 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -22,15 +22,15 @@ export const Header = component$(
     });
 
     return (
-      <Host className="fixed top-0 z-40 w-full h-[56px]">
+      <Host>
         <div class="header-inner">
-          <div className="header-logo">
+          <div class="header-logo">
             <a href="/">
               <span className="sr-only">Qwik Homepage</span>
               <QwikLogo width={110} height={50} />
             </a>
           </div>
-          <button onClickQrl={toggleMenu} class="p-3 md:hidden fixed right-0" type="button">
+          <button onClickQrl={toggleMenu} class="mobile-menu" type="button">
             <span class="more-icon">
               <MoreIcon width={30} height={30} />
             </span>
diff --git a/packages/docs/src/layouts/docs/docs.tsx b/packages/docs/src/layouts/docs/docs.tsx
index c476bb21637..79037fb6012 100644
--- a/packages/docs/src/layouts/docs/docs.tsx
+++ b/packages/docs/src/layouts/docs/docs.tsx
@@ -10,7 +10,7 @@ const DocsLayout = component$(() => {
   useScopedStyles$(styles);
 
   return (
-    <Host class="docs">
+    <Host class="docs fixed-header">
       <Header />
       <SideBar />
       <main>
diff --git a/packages/docs/src/layouts/examples/examples.tsx b/packages/docs/src/layouts/examples/examples.tsx
index 2e0c6e79cd7..70a7aeec3d9 100644
--- a/packages/docs/src/layouts/examples/examples.tsx
+++ b/packages/docs/src/layouts/examples/examples.tsx
@@ -41,7 +41,7 @@ const Examples = component$((props: ExamplesProp) => {
   useScopedStyles$(styles);
 
   return (
-    <Host class="examples full-width">
+    <Host class="examples full-width fixed-header">
       <Header />
 
       <div class="examples-menu-container">
diff --git a/packages/docs/src/layouts/playground/playground.tsx b/packages/docs/src/layouts/playground/playground.tsx
index 11f962cd898..87428b052b2 100644
--- a/packages/docs/src/layouts/playground/playground.tsx
+++ b/packages/docs/src/layouts/playground/playground.tsx
@@ -84,7 +84,12 @@ const Playground = component$(() => {
 
   return (
     <Host
-      class={{ 'full-width': true, playground: true, 'repl-resize-active': store.colResizeActive }}
+      class={{
+        playground: true,
+        'full-width': true,
+        'fixed-header': true,
+        'repl-resize-active': store.colResizeActive,
+      }}
     >
       <Header />
 
diff --git a/packages/docs/src/layouts/tutorial/tutorial.tsx b/packages/docs/src/layouts/tutorial/tutorial.tsx
index 106f9c0fd93..9047c59526f 100644
--- a/packages/docs/src/layouts/tutorial/tutorial.tsx
+++ b/packages/docs/src/layouts/tutorial/tutorial.tsx
@@ -57,7 +57,7 @@ const Tutorial = component$(() => {
   const next = tutorials[currentIndex + 1];
 
   return (
-    <Host class="full-width tutorial">
+    <Host class="tutorial full-width fixed-header">
       <Header />
       <main>
         <div class="tutorial-content-panel">