Found while building a real site in Docker (WP 7.0.2 + SCF).
.site-nav is position: fixed; top: 0 with a transparent background, designed to sit over a hero section. Nothing reserves space for it:
.site-nav{ position:fixed; top:0; background:rgba(0,0,0,0); … }
.site-main{ flex:1 } /* no padding-top, no margin-top */It works by accident when the first block is a .section (padding-top: 8rem clears the nav). On any page whose first block is not a full-bleed hero, the content slides underneath the header.
Worst case, before #— the home page was seeded: an empty page made the fixed header land directly on the footer, so header and footer rendered as one band and the nav was unreadable. That was the first thing anyone scaffolding the theme saw.
Seeding the home page with a hero (88e4565) hides this on the front page only. sample-page and any new page still hit it.
Options
padding-top: var(--site-nav-height) on .site-main, and let hero blocks pull themselves up with a negative margin when they want to sit under a transparent nav.- A body class —
has-hero vs not — set from whether the first block is full-bleed, with the offset applied only when there is no hero.
- Make the nav sticky rather than fixed on non-hero pages.
Option 1 is the smallest change and the least surprising; option 2 is what the design seems to assume.
Acceptance
A page whose first block is an ordinary constrained section renders fully below the nav, with no overlap, at every breakpoint.
Found while building a real site in Docker (WP 7.0.2 + SCF).
.site-navisposition: fixed; top: 0with a transparent background, designed to sit over a hero section. Nothing reserves space for it:It works by accident when the first block is a
.section(padding-top: 8remclears the nav). On any page whose first block is not a full-bleed hero, the content slides underneath the header.Worst case, before #— the home page was seeded: an empty page made the fixed header land directly on the footer, so header and footer rendered as one band and the nav was unreadable. That was the first thing anyone scaffolding the theme saw.
Seeding the home page with a hero (
88e4565) hides this on the front page only.sample-pageand any new page still hit it.Options
padding-top: var(--site-nav-height)on.site-main, and let hero blocks pull themselves up with a negative margin when they want to sit under a transparent nav.has-herovs not — set from whether the first block is full-bleed, with the offset applied only when there is no hero.Option 1 is the smallest change and the least surprising; option 2 is what the design seems to assume.
Acceptance
A page whose first block is an ordinary constrained section renders fully below the nav, with no overlap, at every breakpoint.