SECTION
Site header
The sticky bar at the top of your page: a mark, and whatever navigation belongs beside it.
Mark, a collapsing nav and one action
It is shown static here so it does not follow you down the page. Narrow the window past about 900px and the row of links turns into a button, and the panel behind it holds every destination the row did.
<header class="site-header" style="position:static">
<div class="shell site-header-bar">
<a class="site-header-mark" href="#">
<svg viewBox="0 0 40 40" aria-hidden="true" style="height:34px;width:34px">
<g fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round">
<path d="M22 8 L30 8 L30 16 L22 16 Z"></path>
<path d="M14 16 L30 16 L30 24 L14 24 Z"></path>
<path d="M6 24 L30 24 L30 32 L6 32 Z"></path>
</g>
</svg>
<span>YOUR NAME</span>
</a>
<nav class="nav-switch" aria-label="Primary">
<div class="nav-switch-wide">
<ul class="menu menu-inline">
<li><a class="menu-item" href="#work" aria-current="page">Work</a></li>
<li><a class="menu-item" href="#craft">Craft</a></li>
<li><a class="menu-item" href="#process">Process</a></li>
<li><a class="menu-item" href="#about">About</a></li>
<li><a href="#contact" class="btn btn-primary btn-sm">GET IN TOUCH</a></li>
</ul>
</div>
<div class="nav-switch-tight">
<div class="dropdown">
<button
class="dropdown-button nav-toggle nav-toggle-bars"
popovertarget="ds-site-menu"
aria-label="Menu"
></button>
<div class="dropdown-panel" id="ds-site-menu" popover>
<ul class="menu">
<li><a class="menu-item" href="#work" aria-current="page">Work</a></li>
<li><a class="menu-item" href="#craft">Craft</a></li>
<li><a class="menu-item" href="#process">Process</a></li>
<li><a class="menu-item" href="#about">About</a></li>
<li><a class="menu-item" href="#contact">Get in touch</a></li>
<li>
<details class="menu-fold">
<summary class="menu-item menu-fold-head">
Language
<span class="caret" aria-hidden="true">▾</span>
</summary>
<ul class="menu-group">
<li><a class="menu-item" href="#en" aria-current="page" lang="en">English</a></li>
<li><a class="menu-item" href="#pl" lang="pl">Polski</a></li>
</ul>
</details>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</header>Reference
Read from sections/site-header.css when this page was built, so it cannot fall behind the stylesheet.
.site-header.site-header-bar.site-header-mark--header-shadow — falls back to --ds-shadow-raised--ds-accent--ds-focus-ring--ds-focus-width--ds-font-display--ds-gap--ds-gap-loose--ds-ground--ds-ground-veil--ds-hairline--ds-header-h--ds-ink--ds-mark-h--ds-pad-card--ds-rule--ds-text-ui--ds-track-meta--ds-veil-blurNotes
What goes in the rest of the row is a .menu — inside a .nav-switch if it should collapse to a hamburger, on its own if it should not. This section used to style the links itself, and nav a { color } is a (0,1,1) selector that quietly outranks every component class inside it. It is the rule that dimmed a .btn-primary's label to invisibility — and it was also a second spelling of .menu-inline that nobody had noticed writing.
A navigation that drops its last items on a narrow screen has hidden part of the site, and the reader has no way to know what is missing. That is why the bar wraps rather than scrolling or truncating, and it still does above the threshold. .nav-switch is a different move: it swaps the whole navigation for a button that still holds every destination.
--ds-ground-veil is derived from the ground role rather than stated as a second colour, so a retheme moves it too. The blur sits behind @supports: without the guard, a browser that cannot blur shows a 90%-opaque bar with content ghosting through it, which reads as a rendering fault rather than a design.
scroll-padding-block-start in the base layer is what stops an anchor target landing underneath this bar. Move --ds-header-h and that has to move with it.