From 628a99c37ccfc5559e4247de6e3e78503dd9dde4 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Thu, 2 Apr 2026 23:07:12 -0500 Subject: [PATCH] Fix sticky header: remove position:relative override on .container-header .container-header had position:relative which overrode .sticky-top's position:sticky due to CSS source order (container-header appeared later). Removed the conflicting rule. Added .container-header.sticky-top with z-index:1020 to keep header above all content. Mobile media query now only disables sticky when the sticky class is present. Fixes #115 Co-Authored-By: Claude Opus 4.6 (1M context) --- src/media/css/template.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/media/css/template.css b/src/media/css/template.css index 8a5604c..c845513 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -14204,18 +14204,23 @@ fieldset>* { } .container-header { - position: relative; z-index: 100; background: var(--header-background-image, url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg')); background-size: var(--header-background-size, auto); - -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; background-repeat: var(--header-background-repeat, repeat); } +/* Sticky header: override z-index to stay above all content */ +.container-header.sticky-top { + z-index: 1020; +} + +/* Disable sticky on mobile — full-width header works better as static */ @media (max-width: 991.98px) { - .container-header { - position: relative ; + .container-header.sticky-top { + position: relative; + z-index: 100; } }