Compare with the design specimen https://design.gridonic.io/bruno-weber-lab/ui/specimens/site-header/default/ (Small 400, Large 1500 / 1920).

Large: text logo left, the four navigation entries right, centred in a bar as tall as the outer margin (min 56). Hover and the current page underline the link.

Small (< 1100): logo + "Menu" button; the button opens a full-screen list (Home + entries) and turns into "Close". Escape closes it, the page behind is inert.

The navigation is global (record "Navigation"); "Publications", "News" and "Styleguide" are the entries without a second level.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.