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

Prevent header from sticking to the top of the page on all pages

Browse Source 
Introduce a new CSS class `header-non-sticky` to override default sticky positioning of headers across various pages (Home, VideoPage, FolxStadlPage, NotFound). This ensures the header remains static and does not obscure content.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/Z1wmn8z
This commit is contained in:
sebastjanartic 2025-08-30 21:06:07 +00:00
parent 327582adef
commit dd5452afba
5 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/index.css
View File

@ -335,6 +335,16 @@ input[data-testid*="search"]::placeholder {
filter: blur(0.5px); filter: blur(0.5px);
} }
/* Force header to be non-sticky */
.header-non-sticky {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
}
/* Test grid overlay */ /* Test grid overlay */
body.show-grid::after { body.show-grid::after {
content: ''; content: '';

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

@ -55,9 +55,9 @@ export default function FolxStadlPage() {
} }
return ( return (
<div className="min-h-screen bg-bunny-dark text-white"> <div className="min-h-screen bg-bunny-dark text-white" style={{position: 'static'}}>
{/* Header */} {/* Header */}
<div className="bg-transparent relative overflow-hidden" style={{position: 'static'}}> <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
<div className="max-w-7xl mx-auto px-4 py-4"> <div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Left side - Logo */} {/* Left side - Logo */}

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

@ -201,9 +201,9 @@ export default function VideoPage() {
} }
return ( return (
<div className="min-h-screen bunny-dark static-triangles"> <div className="min-h-screen bunny-dark static-triangles" style={{position: 'static'}}>
{/* Header */} {/* Header */}
<div className="bg-transparent relative overflow-hidden" style={{position: 'static'}}> <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
<div className="max-w-7xl mx-auto px-4 py-4"> <div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Left side - Logo */} {/* Left side - Logo */}

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

@ -73,9 +73,9 @@ export default function Home() {
}, [searchQuery, refetch]); }, [searchQuery, refetch]);
return ( return (
<div className="min-h-screen bunny-dark static-triangles"> <div className="min-h-screen bunny-dark static-triangles" style={{position: 'static'}}>
{/* Header */} {/* Header */}
<div className="bg-transparent relative overflow-hidden" style={{position: 'static'}}> <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
<div className="max-w-7xl mx-auto px-4 py-4"> <div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Left side - Logo */} {/* Left side - Logo */}

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

@ -5,9 +5,9 @@ import go4LogoPath from "@assets/go4_1756394900352.png";
export default function NotFound() { export default function NotFound() {
return ( return (
<div className="min-h-screen bunny-dark static-triangles"> <div className="min-h-screen bunny-dark static-triangles" style={{position: 'static'}}>
{/* Header - same as other pages */} {/* Header - same as other pages */}
<div className="bg-transparent relative overflow-hidden" style={{position: 'static'}}> <div className="bg-transparent relative overflow-hidden header-non-sticky" style={{position: 'static'}}>
{/* Triangle decorations in header */} {/* Triangle decorations in header */}
<div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div> <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
<div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div> <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>