A website header is the strip at the top of every page holding the logo, the main navigation and usually one action button. Strong headers keep five to seven links, put the logo on the left linking home, and collapse into a labelled menu on phones. Below are ten original header designs with editable code.
| Layout | Best for | Watch out for |
|---|---|---|
| Logo left, links right | Most business sites | Too many links pushing the CTA off screen |
| Logo left, links centre, CTA right | SaaS and service sites | Needs enough width; collapse earlier |
| Centred logo, links below | Shops, restaurants, editorial | Taller header uses more screen |
| Utility bar above main bar | Phone-led local businesses | Two bars on mobile; merge them |
| Sticky compact bar | Long pages | Covering anchor targets and content |
Updated
Header galleries usually show pictures. These are working headers built in plain HTML and CSS with made-up brands, so you can resize the frame, change the code and copy the version that fits your site.
The default business layout. The button is the last item, so it is the end point of the scan.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #e2e8f0 }
.logo { font-weight: 800; font-size: 18px }
nav ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; align-items: center }
.cta { background: #2563eb; color: #fff; padding: 9px 16px; border-radius: 8px; font-weight: 600 }
</style>
<header>
<a class="logo" href="#">Brightwell Plumbing</a>
<nav aria-label="Main">
<ul><li><a href="#" aria-current="page">Services</a></li><li><a href="#">Areas</a></li><li><a href="#">Reviews</a></li>
<li><a class="cta" href="#">Get a quote</a></li></ul>
</nav>
</header>Common on software sites. A grid keeps the links truly centred whatever the logo width.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 20px; gap: 12px }
.logo { font-weight: 800 } nav { display: flex; gap: 20px } .end { justify-self: end; display: flex; gap: 10px; align-items: center }
.ghost { padding: 8px 12px } .cta { background: #111827; color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600 }
@media (max-width: 560px) { header { grid-template-columns: 1fr auto } nav { display: none } }
</style>
<header>
<a class="logo" href="#">Ledgerly</a>
<nav aria-label="Main"><a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a></nav>
<div class="end"><a class="ghost" href="#">Log in</a><a class="cta" href="#">Start free</a></div>
</header>Suits shops and restaurants where the brand name is the hero. The links wrap to a second row on narrow screens.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
header { text-align: center; padding: 18px 16px 10px; border-bottom: 1px solid #e7e5e4; background: #fafaf9 }
.logo { font: 700 26px Georgia, serif; letter-spacing: .02em }
nav { margin-top: 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em }
</style>
<header>
<a class="logo" href="#">Olive and Ash</a>
<nav aria-label="Main"><a href="#">Menu</a><a href="#">Book a table</a><a href="#">Private dining</a><a href="#">Visit</a></nav>
</header>For call-led local businesses: the number is a real tel: link so phones can dial it.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
.top { background: #0f172a; color: #e2e8f0; font-size: 13px; padding: 6px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px }
.main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px }
.logo { font-weight: 800 } nav { display: flex; gap: 16px; flex-wrap: wrap }
</style>
<header>
<div class="top"><span>Open Mon to Sat, 7 am to 6 pm</span><a href="tel:+15555550123">Call (555) 555-0123</a></div>
<div class="main"><a class="logo" href="#">Northside Roofing</a>
<nav aria-label="Main"><a href="#">Repairs</a><a href="#">New roofs</a><a href="#">Gallery</a><a href="#">Contact</a></nav></div>
</header>Scroll inside the frame. position: sticky with top: 0 keeps the bar in view; the translucent background stays readable over content.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
background: rgb(255 255 255 / .92); border-bottom: 1px solid #e2e8f0 }
.logo { font-weight: 800 } .cta { background: #059669; color: #fff; padding: 7px 14px; border-radius: 8px; font-weight: 600 }
main p { margin: 0; padding: 14px 16px; border-bottom: 1px dashed #e2e8f0 }
</style>
<header><a class="logo" href="#">Fernhill Yoga</a><a class="cta" href="#">Book a class</a></header>
<main><p>Scroll down.</p><p>The header stays at the top.</p><p>Class timetable</p><p>Teachers</p><p>Prices</p><p>Studio location</p><p>Questions</p><p>End of page</p></main>The summary is the Menu button; the browser handles open, close and keyboard. Wide screens show the links inline.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
header { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid #e2e8f0 }
.logo { font-weight: 800; padding-top: 6px }
summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid #94a3b8; border-radius: 8px; font-weight: 600 }
summary::-webkit-details-marker { display: none }
details ul { list-style: none; margin: 8px 0 0; padding: 0; text-align: right }
details li a { display: block; padding: 8px 4px }
.wide { display: none; gap: 18px }
@media (min-width: 600px) { details { display: none } .wide { display: flex } }
</style>
<header>
<a class="logo" href="#">Copperleaf Dental</a>
<details><summary>Menu</summary>
<nav aria-label="Main"><ul><li><a href="#">Treatments</a></li><li><a href="#">Our team</a></li><li><a href="#">Book online</a></li></ul></nav>
</details>
<nav class="wide" aria-label="Main desktop"><a href="#">Treatments</a><a href="#">Our team</a><a href="#">Book online</a></nav>
</header>The search field has a visually hidden label so screen readers still announce it.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
header { background: #111827; color: #f9fafb; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 18px }
.logo { font-weight: 800; margin-right: auto }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
input { padding: 8px 10px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #fff; min-width: 0; flex: 1 1 140px; max-width: 220px }
nav { display: flex; gap: 14px }
</style>
<header>
<a class="logo" href="#">Tidewater Books</a>
<form role="search"><label class="sr" for="s">Search books</label><input id="s" type="search" placeholder="Search books"></form>
<nav aria-label="Main"><a href="#">New</a><a href="#">Events</a><a href="#">Basket (2)</a></nav>
</header>The header sits on the hero colour. Keep text contrast at 4.5:1 or more against whatever is behind it.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
.hero { background: linear-gradient(135deg, #1e3a8a, #0f766e); color: #fff; min-height: 180px }
header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; flex-wrap: wrap; gap: 10px }
nav { display: flex; gap: 16px } .logo { font-weight: 800 }
.hero h1 { margin: 18px 20px 0; font-size: 24px }
</style>
<div class="hero">
<header><a class="logo" href="#">Summit Trails</a><nav aria-label="Main"><a href="#">Tours</a><a href="#">Dates</a><a href="#">Contact</a></nav></header>
<h1>Guided hikes for small groups</h1>
</div>A short announcement line above the bar carries one offer; the basket count sits in the link text so it is read aloud.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
.note { background: #fef3c7; text-align: center; font-size: 13px; padding: 6px }
.bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #e5e7eb }
nav { display: flex; gap: 16px; flex-wrap: wrap } .logo { font-weight: 800; letter-spacing: .04em }
</style>
<header>
<p class="note" style="margin:0">Free UK delivery on orders over 40 pounds</p>
<div class="bar"><a class="logo" href="#">KILNWORKS</a>
<nav aria-label="Main"><a href="#">Mugs</a><a href="#">Plates</a><a href="#">Gifts</a><a href="#">Basket (0 items)</a></nav></div>
</header>On phones the links fold away but the booking button stays beside the menu, since it is the action that matters.
<style>* { box-sizing: border-box } body { margin: 0; font: 15px/1.4 system-ui, sans-serif }
a { color: inherit; text-decoration: none } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap }
.logo { font-weight: 800; margin-right: auto }
.cta { background: #dc2626; color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 600 }
summary { list-style: none; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer }
summary::-webkit-details-marker { display: none }
details nav { display: grid; gap: 4px; padding-top: 8px }
</style>
<header>
<a class="logo" href="#">Rapid Fix Garage</a>
<a class="cta" href="#">Book MOT</a>
<details><summary>Menu</summary><nav aria-label="Main"><a href="#">Servicing</a><a href="#">Tyres</a><a href="#">Find us</a></nav></details>
</header>| Check | Why |
|---|---|
| Logo links to the homepage | The most expected header behaviour |
| Links are inside a labelled nav | Screen readers list it as navigation |
| Current page marked with aria-current | Announces where the visitor is |
| One primary button, styled differently | Makes the main action obvious |
| Menu button has a visible text label | An icon alone is easy to miss |
| Visible focus outline on every link | Keyboard users can see where they are |
| No sideways scroll at 375 px | Phones are where headers break first |
| Sticky bars do not hide jump-link targets | Fix with scroll-margin-top |
People look for the logo top left and expect it to return them home, so keep that convention unless your brand has a strong reason to centre it. Put the action button at the far right, where the eye ends a scan of the bar.
Order the links by what visitors need most, not by your org chart. Services and pricing usually come before About.
Below roughly 768 pixels most link rows no longer fit. Collapse them behind a clearly labelled Menu button and keep the main CTA visible beside it, since it is the one link that earns its space.
Test at 375 pixels wide. If anything scrolls sideways, shorten labels or collapse sooner.
The logo linking to the homepage, the main navigation and, for most business sites, one primary button such as Book or Get a quote. Local businesses often add a phone number. Leave out anything visitors do not need on every page.
There is no fixed rule. Around 56 to 80 pixels is common for a single bar on desktop, and slimmer on phones. A sticky header should be as short as possible because it covers content the whole time.
Yes. A details element with a summary as the menu button opens and closes the links natively and works with the keyboard. Example 6 on this page uses that approach. A JavaScript button with aria-expanded gives you more control over animation and closing.
On long pages where people need the menu or CTA often, a compact sticky header helps. On short pages it mostly takes space. If you use one, keep it slim and check that in-page links land below it.
Related: Sticky header guide, Hero section examples, Website accessibility checklist, Make a website mobile friendly.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.