Live previewHTML Header Templates30 headers in plain HTML & CSS, free
30 headers in plain HTML and CSS, each one a single file: classic, floating pill dark, minimal full screen menu, docs developer, transparent header on scroll, restaurant header, app style tab bar, public service header and more. Responsive, accessible and free for personal and commercial use.
- 30 distinct headers, each one a single HTML file
- Working mobile menus with keyboard support and visible focus
- Plain HTML, CSS and a little vanilla JavaScript, no frameworks
- Designs
- 30
- Built with
- HTML & CSS
- Licence
- Free, commercial use
- Updated
- Oct 2026
- Free for client projects
- Plain HTML & CSS, no frameworks
- Responsive down to 390px
- Copy, paste and rebrand in minutes
What's inside: 30 designs
See all 30What's inside
All headers & navbars templates 30 designs in this pack
Click any design to open its live preview, then check it at desktop, tablet and phone sizes.
Live preview
Live previewCentred logo
Live previewAnnouncement bar
Live previewFloating pill dark
Live previewMega menu
Live previewShop with search
Live previewMinimal full screen menu
Live previewBusiness with contact bar
Live previewBold gradient SaaS
Live previewDocs developer
Live previewSliding pill navigation
Live previewMagazine masthead
Live previewTransparent header on scroll
Live previewVertical side rail
Live previewCommand palette header
Live previewRestaurant header
Live previewGlobal store header
Live previewHide on scroll article header
Live previewApp style tab bar
Live previewConference header with countdown
Live previewExpanding search header
Live previewPublic service header
Live previewBrutalist streetwear header
Live previewHeader with mini player
Live previewCheckout header with steps
Live previewHotel header with booking bar
Live previewCommunity header with live badge
Live previewPlayful kids header
Live previewDelivery app header
Live previewCorporate group header
How to use
From download to live in three steps
- Download the packClick Download free above and the zip downloads straight away. Unzip it and open index.html to see every design.
- Copy the design inPaste its HTML into your page and its CSS into your stylesheet. Copy the small script too if it has one.
- Make it yoursChange the colour and font variables at the top of the CSS, then swap in your own text, links and images.
Reviews
Customer reviews
Only people who bought or downloaded it can leave a review, from their account page.
Reply from the maker
FAQ
Common questions
Can I use it for client work?
Yes. It's free for personal and commercial projects, including client sites. Just don't resell the pack itself.
Do I need Tailwind, Bootstrap or a build step?
No. Each design is plain HTML and CSS with a few lines of JavaScript where needed.
Do the headers work on mobile?
Yes. Every header has a mobile menu that opens with a button and closes with Escape.
What does the licence allow?
Use it on unlimited websites, your own and your clients', and change anything. You just can't resell or share the files themselves. See the licence.
Guides
Learn more
- How to Build a Responsive Navbar with HTML, CSS and a Little JavaScriptA step-by-step tutorial for an accessible, mobile-friendly navigation bar: semantic HTML, mobile-first CSS, a hamburger toggle that works with the keyboard, and the mistakes to avoid.
- How to Make a Sticky Header with CSS (position: sticky), Plus Shrink, Shadow and Hide on ScrollMake a header that stays at the top with one line of CSS, find out why position: sticky sometimes does nothing, and add a shadow, a shrink effect and hide-on-scroll with a few lines of JavaScript.
Get HTML Header Templates
30 designs, free for personal and commercial projects.
More products
