From e7fe1e60165f2d1a8dec57e164390fe8228212c1 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:23:51 +0000
Subject: [PATCH] Make the header stay in place when scrolling down the page

Update CSS to change the header's position from sticky to fixed, ensuring it remains visible at the top of the viewport. Add padding to the body to prevent content from being obscured by the fixed header.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/BesXHXW
---
 client/src/index.css               | 12 ++++++++++--
 client/src/pages/FolxStadlPage.tsx |  2 +-
 client/src/pages/VideoPage.tsx     |  2 +-
 client/src/pages/home.tsx          |  2 +-
 client/src/pages/not-found.tsx     |  2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 4c7e6b9..4a58d2b 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -335,14 +335,22 @@ input[data-testid*="search"]::placeholder {
   filter: blur(0.5px);
 }
 
-/* Sticky header */
+/* Fixed header */
 .header-sticky {
-  position: sticky !important;
+  position: fixed !important;
   top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
   z-index: 100 !important;
   backdrop-filter: blur(8px);
   background: rgba(30, 20, 40, 0.85) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  width: 100% !important;
+}
+
+/* Add padding to body to account for fixed header */
+.has-fixed-header {
+  padding-top: 80px;
 }
 
 /* Test grid overlay */
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 071736a..a21dcd8 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -55,7 +55,7 @@ export default function FolxStadlPage() {
   }
 
   return (
-    <div className="min-h-screen bg-bunny-dark text-white">
+    <div className="min-h-screen bg-bunny-dark text-white has-fixed-header">
       {/* Header */}
       <div className="header-sticky bg-transparent overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 py-4">
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 368c5ca..71a9cfb 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -201,7 +201,7 @@ export default function VideoPage() {
   }
 
   return (
-    <div className="min-h-screen bunny-dark static-triangles">
+    <div className="min-h-screen bunny-dark static-triangles has-fixed-header">
       {/* Header */}
       <div className="header-sticky bg-transparent overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 py-4">
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index aa51314..360ef1f 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -73,7 +73,7 @@ export default function Home() {
   }, [searchQuery, refetch]);
 
   return (
-    <div style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
+    <div className="has-fixed-header" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
       {/* STICKY HEADER */}
       <div className="header-sticky bg-transparent overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 py-4">
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 12fb04c..4ddb857 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -5,7 +5,7 @@ import go4LogoPath from "@assets/go4_1756394900352.png";
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen bunny-dark static-triangles">
+    <div className="min-h-screen bunny-dark static-triangles has-fixed-header">
       {/* Header - same as other pages */}
       <div className="header-sticky bg-transparent overflow-hidden">
         {/* Triangle decorations in header */}