Every header on this page was designed and coded in-house by uiCookies — our own pack, not a roundup of other people’s demos. Each design is a single self-contained HTML file with the CSS inlined; two designs use a few lines of vanilla JavaScript (the scroll switch and the drawer toggle), the other eight are pure CSS.
The ten designs cover the header problems real sites have: SaaS navs with dropdowns and mega menus, transparent heroes that need a solid header on scroll, centered mastheads for brand-led sites, in-app dashboard headers, double-deck service-business headers, mobile drawers, glass pills, storefront headers with cart badges, and one that shouts. Every demo ships with a small hero so you can see the header in context.
Download all 10 (free) Browse live demos
The designs
1. Classic SaaS Header
Logo left, navigation with a real hover dropdown, sign-in and CTA right — the default header for products and startups. The dropdown is pure CSS with a soft reveal.
2. Transparent-to-Solid Scroll Header
Sits glass-clear over the hero, then turns solid, compact, and shadowed the moment you scroll. Three lines of JavaScript toggle a class; CSS transitions do the rest.
3. Mega Menu Header
A full-width mega menu with three link columns (each link carrying a one-line description) plus a gradient promo card. Reveal is pure CSS hover — no menu plugin.
4. Centered Masthead
A serif logotype centered between split navigation, topped with an announcement bar — the department-store pattern for fashion, jewelry, and heritage brands.
5. Dark In-App Header
The dashboard header: product nav with an active state, a ⌘K search field, a notification bell with an unread dot, and an avatar. Made to sit above admin tables.
6. Double-Deck Service Header
A utility strip for hours and phone number over a main deck with brand, nav, and a quote button. The pattern local service businesses — contractors, clinics, firms — actually need.
7. Hamburger Drawer Header
A hamburger that morphs into a cross, opening a slide-in drawer over a dimmed veil. Closes on tap-out, works at every viewport — the mobile pattern, usable on desktop too.
8. Floating Glass Pill
A detached, rounded glass header that floats inside the page with a sticky inset — backdrop blur keeps frosting whatever scrolls underneath it.
9. Storefront Header
Ecommerce anatomy in one block: search front and center, saved/account/cart with count badges, and a horizontally scrollable category strip beneath.
10. Neobrutalist Header
A floating card header with thick borders, hard offset shadows, and buttons that physically move on hover. For brands with an opinion.
Using the headers
Copy the <header> markup and the CSS block from the top of the file — the hero sections in the demos are context only. Colors and spacing are declared once per file, and the class names are scoped, so nothing collides with Bootstrap or your existing styles. Full notes ship in the pack download.
Frequently asked questions
Are these header templates free?
Yes. The whole pack downloads free from the uiCookies pack page — no signup, no email gate. See the uiCookies license page for attribution details.
How do I make a transparent header that changes on scroll?
The transparent design in this pack does it with a three-line scroll listener that toggles a .solid class after 40px, while CSS transitions animate the background, height, and colors. Download the pack and read the last script tag of design 02.
Do the headers work on mobile?
Yes — navigation collapses at each design’s breakpoint, and the pack includes a dedicated hamburger drawer pattern with a morphing icon, slide-in panel, and tap-out close that you can graft onto any of the other nine designs.
Can I use these with Bootstrap instead of the navbar component?
Yes. The headers use their own scoped class names, so they replace or coexist with Bootstrap’s .navbar without conflicts.
Building the rest of the page? Pair these with our card templates, table templates, and login forms, or start from a complete free HTML website template.
