Headers – 10 Free Website Header Templates
Headers is a pack of ten website header and navigation templates, each a single self-contained HTML file with the CSS inlined. Eight designs are pure CSS; the scroll-switching header and the hamburger drawer use a few lines of vanilla JavaScript each. No libraries, no build step, and every demo includes a small hero so the header is shown in context.
The ten designs
- Classic SaaS — logo, dropdown nav, sign-in and CTA.
- Transparent Scroll — glass over the hero, solid and compact after 40px of scroll.
- Mega Menu — three described link columns plus a promo card, pure CSS reveal.
- Centered Masthead — serif logotype, split navigation, announcement bar.
- Dark In-App — active nav state, ⌘K search, notification dot, avatar.
- Double Decker — utility strip (hours, phone) over the main nav; for service businesses.
- Hamburger Drawer — morphing icon, slide-in panel, dimmed veil, tap-out close.
- Glass Pill — floating frosted header with a sticky inset.
- Storefront — center search, saved/account/cart badges, category strip.
- Neobrutalist — floating card, hard shadows, buttons that move.
At a glance
- 10 designs, one folder each, single
index.htmlper design - 8 pure-CSS designs; 2 with minimal vanilla JS (scroll switch, drawer toggle)
- Scoped class names — coexists with Bootstrap’s .navbar without conflicts
- Responsive: navs collapse at sensible breakpoints; a full mobile drawer pattern is included
- System font stacks; the masthead uses system serif
- README with a design index and usage notes
How to use
Copy the header markup and the CSS block from the top of the file — the demo heroes are context only. Preview all ten on the live demo index, or read the full write-ups on our website header templates page.
FAQ
Can I use these in commercial projects?
Yes — the pack follows the standard uiCookies license. Attribution details are on the license page.
Which design should I start from?
For a product or startup site, start with Classic SaaS and graft on the drawer for mobile. For content or brand sites, the Centered Masthead; for stores, the Storefront header.
