/** * CreatoMark Kit — Sticky Header. * * Applies to the site's header (frontend.php tags it `cmk-sticky-header`, * plus a mode class and condition classes for its settings). * * POSITION — two modes: * * cmk-sticky-mode-always Pure CSS `position: sticky` — the header stays * in normal document flow (reserving its own * space) and simply stops scrolling away once it * reaches the top. Applied unconditionally. * * cmk-sticky-mode-scroll Starts as a completely normal, in-flow header. * `position: fixed` only applies once `.is-stuck` * is added — see below. * * "STUCK" VISUAL EFFECTS — shrink, background style and shadow — are all * gated on the SAME `.is-stuck` class, added by sticky-header.js once the * visitor has scrolled past the configured threshold, REGARDLESS of * position mode: even "Always sticky" only shrinks/recolors/shadows once * there has actually been some scrolling, rather than from the instant the * page loads, which reads far better in practice. In "Sticky after * scrolling" mode, `.is-stuck` additionally switches the position itself. * * `!important` on background/color: a Navigation block can carry its own * explicit background colour, which WordPress applies as a `!important` * global utility class (confirmed on a real site while debugging the same * issue in the Mega Menu module) that no amount of selector specificity * alone can outrank. The same applies to whatever the separate Transparent * Header module may have set on this same element (its own * `position: absolute`, not `!important`) — once stuck, this module is * meant to visibly win over that. */ /* * Once the header is positioned (either mode), it becomes a stacking * context — which TRAPS any of its own fixed/absolute-positioned * descendants (a mega menu panel, Mobile Menu's flyout) at this z-index, * regardless of how high a z-index THEY declare: their number is only ever * compared against the header's OTHER descendants, never against sibling * elements outside the header (like Mega Menu's or Mobile Menu's own * page-dimming backdrop layers, both well above 99000). A lower value here * previously relied on Mega Menu's own panel separately lifting the header * higher via inline JS whenever ITS backdrop was open — which left Mobile * Menu's flyout with no such help, so its OWN backdrop rendered on top of * it instead of behind it (confirmed live, reported with a screenshot). * Comfortably above every backdrop/overlay z-index used anywhere in this * plugin (currently the 99998–100000 range) avoids relying on any one * module coordinating with another to stay on top. */ .cmk-sticky-header.cmk-sticky-mode-always { position: sticky !important; top: 0; z-index: 999999; } .cmk-sticky-header.cmk-sticky-mode-scroll.is-stuck { position: fixed !important; top: 0; right: 0; left: 0; z-index: 999999; } /* * The WordPress admin toolbar (logged-in users only) reserves its own * space by adding `margin-top` to — but that only pushes elements * still in normal document flow. Both modes above take the header OUT of * flow (`sticky`/`fixed`), so without this, the header ignores that * reserved space and sticks at the very top of the viewport once * scrolled — right where the toolbar itself sits (`position: fixed`, * `top: 0`) — rendering underneath/behind it (confirmed live, reported * with a screenshot). `--wp-admin--admin-bar--height` is the same custom * property core's own admin-bar CSS defines and updates at its own * mobile breakpoint (32px desktop, 46px ≤782px), so this tracks it * automatically rather than duplicating that breakpoint here. */ body.admin-bar .cmk-sticky-header.cmk-sticky-mode-always, body.admin-bar .cmk-sticky-header.cmk-sticky-mode-scroll.is-stuck { top: var(--wp-admin--admin-bar--height, 32px); } .cmk-sticky-header { transition: background-color var(--cmk-sh-duration, 250ms) ease, color var(--cmk-sh-duration, 250ms) ease, box-shadow var(--cmk-sh-duration, 250ms) ease, padding-top var(--cmk-sh-duration, 250ms) ease, padding-bottom var(--cmk-sh-duration, 250ms) ease, backdrop-filter var(--cmk-sh-duration, 250ms) ease; } /* * Shrink: sticky-header.js reads the header's own normal padding-top/bottom * once, then sets a reduced inline value (padding × --cmk-sh-scale) while * `.is-stuck`, and clears the inline value (reverting to the theme's own * CSS) once un-stuck. This only ever touches the header's OWN spacing — * its width and everything inside stay full-size and undistorted, unlike a * `transform: scale()` approach, which would also shrink the header's width * (leaving gaps at both edges) and visually squash its contents. */ /* * Background once stuck: "solid" is a plain opaque fill; "frosted" tints * with the same colour at the configured opacity and blurs whatever * scrolls behind it (a supporting browser is assumed — see the fallback * note below). */ .cmk-sticky-header.cmk-sticky-bg-solid.is-stuck { background-color: var(--cmk-sh-bg, #fff) !important; } .cmk-sticky-header.cmk-sticky-bg-frosted.is-stuck { background-color: var(--cmk-sh-bg-rgba, rgba(255, 255, 255, 0.7)) !important; -webkit-backdrop-filter: blur(var(--cmk-sh-blur, 12px)); backdrop-filter: blur(var(--cmk-sh-blur, 12px)); } /* No `@supports` fallback needed for the blur specifically: without it, the * browser simply shows the semi-transparent tint on its own — still a * reasonable "frosted" look, just without the blur. */ /* * `backdrop-filter` on an element makes it the CONTAINING BLOCK for any * `position: fixed` descendant (same rule `transform`/`filter`/`will-change` * trigger) — a lesser-known part of the CSS spec, but a real one. Mobile * Menu's flyout (`.wp-block-navigation__responsive-container.is-menu-open`) * is `position: fixed` and lives INSIDE the header in the DOM, so once the * header gained `backdrop-filter` here, opening the flyout trapped it * inside the header's own filtered layer instead of escaping to the * viewport as `position: fixed` normally would — visually, the blur bled * onto the flyout itself, reported with a screenshot (everything inside it, * including its own opaque background, appeared blurred). The tint colour * alone doesn't create a containing block, so it's kept; only the blur is * turned off while the flyout is open. */ .cmk-sticky-header.cmk-sticky-bg-frosted.is-stuck:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; } .cmk-sticky-header.cmk-sticky-bg-solid.is-stuck, .cmk-sticky-header.cmk-sticky-bg-solid.is-stuck a:where(:not(.wp-element-button)), .cmk-sticky-header.cmk-sticky-bg-frosted.is-stuck, .cmk-sticky-header.cmk-sticky-bg-frosted.is-stuck a:where(:not(.wp-element-button)) { color: var(--cmk-sh-text, #111) !important; } .cmk-sticky-header.cmk-sticky-has-shadow.is-stuck { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* The placeholder sticky-header.js inserts while "Sticky after scrolling" * is stuck, reserving the header's normal-flow space so content beneath it * doesn't jump. Zero height until then. */ .cmk-sticky-header-spacer { height: 0; } @media (prefers-reduced-motion: reduce) { .cmk-sticky-header { transition: none; } } /* * "Enable on mobile" off: only POSITION needs forcing back to normal here — * "Always sticky" is pure CSS (`position: sticky` applies unconditionally, * with no JS involved), so this media query is what actually turns it off * below 600px, the same breakpoint WordPress core's own Navigation block * uses to switch to its hamburger/flyout (confirmed in * wp-includes/blocks/navigation/style.css) — "mobile" here means the same * thing it does for the mobile menu itself. The shrink/background/shadow * effects need no override of their own: sticky-header.js never adds * `.is-stuck` in the first place on a narrow viewport when this class is * present (see its own comments), so the rules gated on `.is-stuck` above * simply never match — no need to fight them here with more `!important`, * which could otherwise clobber a real theme background/shadow on mobile. */ @media (max-width: 599px) { .cmk-sticky-header.cmk-sticky-disable-mobile { position: static !important; z-index: auto !important; } }