sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the header stay in place when scrolling down the page

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 21:23:51 +00:00
parent 0875db5a5c
commit e7fe1e6016
5 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/index.css
View File

@ -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 */

2
client/src/pages/FolxStadlPage.tsx
View File

@ -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">

2
client/src/pages/VideoPage.tsx
View File

@ -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">

2
client/src/pages/home.tsx
View File

@ -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">

2
client/src/pages/not-found.tsx
View File

@ -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 */}