5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven site and app headers: the classic logo, links and button that folds into a menu, a centred logo with navigation on both sides, an announcement bar, a header built around search, a transparent header over a hero, a shop header with counted icons and an app bar with breadcrumbs.
The standard site header: logo on the left, navigation in the middle and a button on the right. Below 520px of width the links fold into a menu button with aria-expanded, using a container query so the header adapts to its own space.
var b = document.querySelector('.hd1 .mb'), n = document.getElementById('hd1n');
b.onclick = function () { var o = n.classList.toggle('open'); b.setAttribute('aria-expanded', o); };
02. Centred Logo with Split Navigation
HeaderBrand
A boutique-style header with the logo in the middle and links split evenly either side, built with a three-column grid of 1fr auto 1fr so the logo stays exactly centred even when the two link groups have different widths.
A slim announcement bar above the main header for shipping offers or sales. The bar is a separate region with its own label and a dismiss button, and dismissing removes it without moving keyboard focus unexpectedly.
View code
<div class="hd3"><div class="bar" role="region" aria-label="Announcement"><p>Free shipping on orders over $50 · <a href="#ship">Details</a></p><button aria-label="Dismiss announcement">×</button></div><header><a class="logo" href="#home">fern</a><nav aria-label="Main"><a href="#shop">Shop</a><a href="#journal">Journal</a></nav></header></div>
var bar = document.querySelector('.hd3 .bar'), logo = document.querySelector('.hd3 .logo');
bar.querySelector('button').onclick = function () { bar.remove(); logo.focus(); };
04. Header with Search Field
HeaderSearch
For content-heavy sites the search field is the main tool, so it takes the centre of the header and grows to fill the space. It is a search landmark with a labelled input, and on narrow screens it drops below the logo instead of shrinking to nothing.
View code
<header class="hd4"><a class="logo" href="#home">docs<span>/</span></a><form role="search" aria-label="Site"><label for="hd4q" class="sr">Search the docs</label><input id="hd4q" type="search" placeholder="Search the docs"></form><a class="gh" href="#github">GitHub</a></header>
A header that sits on top of the hero image with no background of its own, common on hotel and portfolio sites. A gradient at the top of the hero keeps the white links readable over any photo, which a fully transparent header cannot guarantee.
View code
<div class="hd5"><header><a class="logo" href="#home">Casa Mar</a><nav aria-label="Main"><a href="#rooms">Rooms</a><a href="#dining">Dining</a><a href="#book">Book</a></nav></header><div class="hero"><h3>A quiet stay by the sea</h3></div></div>
A shop header with account, wishlist and cart icons, each a link with an accessible name that includes its count, such as Cart, 3 items. The count badges are decorative copies of that number, and the icons keep 44px tap targets.
A web app's top bar: the current page title as the main heading, a breadcrumb trail above it, and an avatar button for the account menu. Inside apps the header orients people rather than markets, so the title is the largest thing in it.
View code
<header class="hd7"><div><nav aria-label="Breadcrumb"><ol><li><a href="#projects">Projects</a></li><li><a href="#acme">Acme rebrand</a></li></ol></nav><h3>Design review</h3></div><button aria-label="Account menu for Ana Ribeiro" aria-haspopup="menu" aria-expanded="false">AR</button></header>
Wrap the header in <header> and each group of links in <nav> with an aria-label when there is more than one, such as Main and Account, so screen reader users can jump straight to them.
Collapse with a real button
When links fold away on small screens, the toggle is a <button> with aria-expanded and aria-controls. A container query lets the header collapse based on its own width.
Icons need names
Icon links such as cart and account need an aria-label, and counts belong in that name (Cart, 3 items). Keep tap targets at least 44 by 44 pixels.
Readable over images
A header over a photo needs a scrim: a dark gradient at the top of the hero guarantees contrast for white links whatever the image looks like.
Frequently asked questions
Should the header be sticky?
Often, on long pages. See the sticky elements collection for a header that only gains a shadow once it is stuck.
How do I keep a logo exactly centred?
Use a grid of 1fr auto 1fr; the side columns share the space equally regardless of their content.
Where should the main call to action go?
Top right is the convention people look for, and it should stay visible on mobile when it matters most.