Header Announcement
A site header with a strip of news on top: messages roll and pause on hover or focus; the cross folds the strip, the header slides up without a jump, and it stays closed. Below 900 px, a shutter menu.
View codeThe library
Header
6 header components in plain HTML, CSS and JS.
Header Centered
A centred header for a restaurant or a shop: the name in the middle, links on both sides, a line above that says whether it's open now. On scroll the bar tightens; below 900 px, a full-screen menu.
View code
Header Classic
A site header with a logo, links and one button: a line glides under the links, front edge first, and returns under the current page; below 900 px the links become a shutter menu.
View code
Header Mega
A full site header whose mega menus share one panel: from a link to the next it changes shape and slides instead of closing, a soft pill follows the pointer, and below 900 px the links become a drawer with levels.
View code
Header Overlay
A transparent header over the hero photo: once the hero passes under it, a solid bar comes down and the text turns dark along its edge; below 900 px, a full-screen menu.
View code
Header Shop
A shop header: the name, the categories, a search that opens over them, the account and a bag whose count rolls when something is added. Below 900 px, a menu the page steps aside for.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it