MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Fix sticky header: remove position:relative override on .container-header

Browse Source 
.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) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-02 23:07:12 -05:00
parent 27c0006ac2
commit 628a99c37c
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/media/css/template.css
View File

@@ -14204,18 +14204,23 @@ fieldset>* {
} }
.container-header { .container-header {
position: relative;
z-index: 100; z-index: 100;
background: var(--header-background-image, url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg')); background: var(--header-background-image, url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'));
background-size: var(--header-background-size, auto); 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; box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset;
background-repeat: var(--header-background-repeat, repeat); 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) { @media (max-width: 991.98px) {
.container-header { .container-header.sticky-top {
position: relative; position: relative;
z-index: 100;
} }
} }