Sticky header not working #115

New Issue

2026-04-03T04:05:14Z

jmiller-moko commented

2026-04-03 04:05:14 +00:00

(Migrated from github.com)

Description

The sticky header option (stickyHeader parameter) was not functioning. When enabled in template config, the header should stick to the top of the viewport on scroll.

Root Cause

CSS specificity conflict in template.css:

.container-header (line 14207) set position: relative — this always applied
.sticky-top (line 8206) set position: sticky — this was supposed to override when enabled
Both selectors have the same specificity (one class), so source order wins
.container-header appeared later in the file → position: relative won → sticky broken

Additionally, the mobile media query unconditionally forced position: relative on .container-header, preventing sticky on all screen sizes.

Fix

Removed position: relative from .container-header base rule (not needed — defaults to static)
Added .container-header.sticky-top (two-class specificity) with z-index: 1020
Scoped mobile position: relative to only .container-header.sticky-top so non-sticky headers are unaffected

Investigation Checklist

Check if stickyHeader param is registered in templateDetails.xml — ✅ exists, default 0
Verify the CSS classes are applied correctly — ✅ PHP adds position-sticky sticky-top correctly
Check if z-index is set high enough on .header — ❌ was 100, now 1020 when sticky
Check if parent containers have overflow: hidden — ✅ no overflow issues
Verify the param value is being read correctly in index.php — ✅ correct
Root cause: .container-header overrides .sticky-top via source order

Status

Fixed in commit 628a99c. Closes #115.

## Description The sticky header option (`stickyHeader` parameter) was not functioning. When enabled in template config, the header should stick to the top of the viewport on scroll. ## Root Cause **CSS specificity conflict** in `template.css`: 1. `.container-header` (line 14207) set `position: relative` — this always applied 2. `.sticky-top` (line 8206) set `position: sticky` — this was supposed to override when enabled 3. Both selectors have the same specificity (one class), so **source order wins** 4. `.container-header` appeared later in the file → `position: relative` won → sticky broken Additionally, the mobile media query unconditionally forced `position: relative` on `.container-header`, preventing sticky on all screen sizes. ## Fix - **Removed** `position: relative` from `.container-header` base rule (not needed — defaults to `static`) - **Added** `.container-header.sticky-top` (two-class specificity) with `z-index: 1020` - **Scoped** mobile `position: relative` to only `.container-header.sticky-top` so non-sticky headers are unaffected ## Investigation Checklist - [x] Check if `stickyHeader` param is registered in templateDetails.xml — ✅ exists, default 0 - [x] Verify the CSS classes are applied correctly — ✅ PHP adds `position-sticky sticky-top` correctly - [x] Check if `z-index` is set high enough on `.header` — ❌ was 100, now 1020 when sticky - [x] Check if parent containers have `overflow: hidden` — ✅ no overflow issues - [x] Verify the param value is being read correctly in index.php — ✅ correct - [x] **Root cause: `.container-header` overrides `.sticky-top` via source order** ## Status **Fixed** in commit `628a99c`. Closes #115.

jmiller-moko commented

2026-04-03 04:10:47 +00:00

(Migrated from github.com)

Fixed in commit 628a99c. Root cause was CSS specificity: .container-header set position:relative which overrode .sticky-top's position:sticky.

Fixed in commit 628a99c. Root cause was CSS specificity: .container-header set position:relative which overrode .sticky-top's position:sticky.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoCassiopeia#115