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) <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user