/* ============================================================================= * Header chrome — the Sticky / Full-width / Sticky-on-mobile switches * ----------------------------------------------------------------------------- * Every rule here is driven by a class inc/header-settings.php puts on , so * this file changes nothing until one of those switches is on. The switches only * decide POSITION and WIDTH; nothing about how a header looks belongs here. * * WHY `position: sticky` AND NOT `fixed`. A fixed header is removed from flow, so * the moment it pins, everything below it jumps up by the header's height. The * usual patch is a placeholder element of matching height, which then has to be * kept in sync with a header whose height can change. `sticky` keeps the element * in flow and reserves its own space, so there is nothing to jump and nothing to * synchronise. It also needs no scroll listener to pin. * * A child theme that deliberately takes the header OUT of flow — an overlay * masthead, say — will need `fixed` instead, and can override these rules from * its own stylesheet: it loads after this one and the selectors are identical, so * source order settles it without an !important or a specificity contest. * * THE TWO BREAKPOINT HALVES ARE SEPARATE SWITCHES ON PURPOSE. Pinning is a good * default on a wide screen and often a bad one on a phone, where a pinned bar can * eat a large share of a short viewport. So desktop reads `-sticky` and small * screens read `-sticky-mobile`, and neither implies the other. * * 900px is the breakpoint the rest of this theme's chrome already uses. * ========================================================================== */ /* ---- sticky: desktop and up -------------------------------------------- */ @media (min-width: 900px) { body.arneiron-header-sticky .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 30; } } /* ---- sticky: below the breakpoint, its own switch ----------------------- */ @media (max-width: 899.98px) { body.arneiron-header-sticky-mobile .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 30; } } /* ---- boxed (default) vs full-width -------------------------------------- * * Only the ROW inside the header is constrained — the bar itself keeps whatever * background and full-bleed width it had, which is what makes a boxed header read * as a boxed row on a full-width band rather than as a floating card. * * `--wp--style--global--content-size` is the layout width from theme.json, so this * follows Styles → Layout instead of restating the number. The fallback only * applies if a site somehow has no layout width at all. * ------------------------------------------------------------------------- */ @media (min-width: 900px) { body.arneiron-header-boxed .site-header { max-width: var(--wp--style--global--content-size, 1300px); margin-inline: auto; } body.arneiron-header-full .site-header { max-width: none; } }