Have you ever landed on a website and left within seconds, without quite knowing why? The design itself was likely fine, yet you had no clear sense of where to go next. The header is what plays a key role in helping users navigate the page.
Co-founder & CEO at Halo Lab
The header is the first thing people see when they arrive on a website and the place they return to when they lose their way, giving it a quiet influence on how the whole site feels to use. Yet designing an effective header means making thoughtful choices about everything from navigation and hierarchy to branding and interaction. In this article, we’ll explore the main types of headers, share practical design tips, look at 15 website header examples, and explain why each design choice works.
{{banner}}
Key elements of a website header
Before drilling down into the specifics of header design for a website, let’s define the key terms you should be familiar with.
The hero is an image or banner at the top of a website, usually placed beneath the header. It sets the tone of the page and gives visitors an immediate sense of what the site is about. The header then helps them move forward, acting as a signpost to the site’s key destinations. Common header elements include:
- Logo
- User account
- Call-To-Action
- Essential text
- Menu and navigation
- Search bar
Some headers may also include a shopping cart, social media links, language options, etc. It depends on your website’s nature and what your visitors need to access.
Common header types
A website header not only organizes navigation but also shapes how users move through a page and access key destinations. That’s why, to choose the right one, consider the site’s content, menu structure, user behavior, and how often users need access to key destinations. Common header types include:
- Sticky header. Stays visible as the page scrolls, usually shrinking or simplifying on the way down. Common on long marketing pages.
- Fixed header. Permanently pinned to the top of the viewport and never moves. Suits documentation and web apps where navigation is in constant use.
- Transparent header. Sits directly on a full-bleed hero image or video with no background band, then usually switches to a solid state on scroll.
- Hamburger header. Collapses the menu behind an icon to keep the top of the page clean. Standard on mobile, a deliberate choice on desktop.
- Mega menu. A wide dropdown panel that reveals a whole category structure at once. Built for deep catalogs and large product ranges.
In practice, these rarely appear alone: a sticky header can start out transparent over the hero, while a mega menu almost always collapses into a hamburger on mobile.
15 website header examples
To demonstrate how different types are used in real-world settings and spark new website header ideas, our creative team handpicked 15 standout examples from brands across different industries.
1. Two-level header — Pro Cabinet Supply
Let’s explore the best header designs through our own work. This header belongs to a cabinet hardware and supply store with a large product catalog, so the challenge was fitting utility, navigation, and merchandising into one cohesive structure without overwhelming the user.
The header version we shipped is split into two persistent levels: the first holds core site sections and contact info, and the second holds shopping tools (a Catalog dropdown, a search bar, quick-access icons). This structure keeps the full category list out of the way until needed, so the menu never competes with top-level navigation or search. It’s a strong pattern for catalog-heavy e-commerce sites.
2. Search-first header — Airbnb
Airbnb is one of the most intuitive and concise header website examples. It’s primarily focused on search, with destination, dates, and guests set straight from the bar. Thus, the service is instantly accessible, with no need to sign up right away. New visitors can use the search to see how the site works and realize its value. Category tabs for Homes, Experiences, and Services sit above the search field and collapse out of view on scroll, leaving a condensed sticky bar in their place. Search-first strategy works especially well for marketplaces and booking sites where search is the product itself.
3. Minimalist header with a dual CTA — Asana
A clean interface never goes out of style. Asana is a strong example of effective header design with no extras. Its sitemap is large, covering numerous services, features, and resources, but only the main menu items appear in the header. Everything else sits in dropdowns, organized by team, industry, and use case, with Pricing as a standalone link. On the right are Log in, Contact sales, and Get started — a clear dual-CTA setup. One path serves teams ready to sign up, while the other leads to a sales conversation. Hiding deeper navigation behind predictable labels keeps the header manageable as a SaaS platform expands.
4. Fixed header with flat navigation — Intercom
The Intercom header keeps navigation flat and uncluttered, with dropdowns only on Product and Resources — the left side is the part worth copying. However, on the right side, Log in, Contact sales, View demo, Start free trial, and Fin AI Agent all sit in one bar, so the primary path competes with three other actions for the same glance. Headers grow this way one launch at a time, and it’s most common on SaaS sites where every launch wants its own button. The fix is deciding which single action the page exists for.
5. Balanced header with an oversized hero — Sonato
Among Halo Lab’s cases, the Sonato website shows how a functional header can give the hero room to make an impact. Key elements are placed in the usual, intuitive order, allowing users to navigate quickly and access menu elements like search, contacts, and the shopping cart. At the same time, such a conventional header lets the hero block stand out with oversized headline text, memorable visuals, a gradient background, and original image placement. It’s a great choice for beauty and lifestyle e-commerce, where brands need to feel distinctive, and shoppers still expect familiar elements in the top right.
6. Vertical side navigation — Lips Love
Sometimes, breaking conventional header rules can create a stronger result. For our client Lips Love, we took a creative approach to element placement, positioning the menu along the left side of the screen. Despite breaking with the usual structure, it still looks clear, intuitive, and non-overwhelming. Meanwhile, the header and hero blocks are unique and memorable, introducing a bright background, bold typefaces, and an image that effectively communicates the product’s essence. Vertical navigation works here because the item count is small. That makes it a good fit for portfolios and single-collection landing pages but costs horizontal space you can’t spare on a large site.
7. Minimal header under an editorial hero — WE.MOV
This is one more web header design by the Halo Lab team. Its main specifics are a retro magazine style and a clean, restrained structure with generous white space. The header stays deliberately minimal, combining a small centered logotype with navigation split evenly left and right, letting the oversized hero type carry the visual weight instead and set the page’s tone from the first scroll. Such craftsmanship-led design works best for studios and production companies whose whole pitch is craft, where a generic header would undercut it.
8. Visual-led header — Toyota
Toyota’s website includes a big hero block with a video placed in a slideshow. It’s a perfect example of how visual content can replace text, letting visitors immediately immerse themselves in the product’s essence. The header here stays flat and minimal, pairing logotype and three top-level links on the left and an account icon on the right. Even so, it reads clearly, since it sits on its own solid white band rather than floating directly over the footage. This kind of design shines in automotive and other visually driven industries, where the product itself is the strongest sales pitch.
9. Search-focused e-commerce header — IKEA
IKEA’s UK site gives the search field the center of the header, flanked by the logo and a row of broad category links on one side and the usual account and basket controls on the other. A store selector and postcode field sit above it. For a catalog this size, search is faster than any menu tree, so it gets the most valuable position on the page. This has become a common pattern for large retail: shoppers who know what they want type it, and shoppers who are browsing use the categories. Serving both intents in one header is what keeps the path to a product short.
10. Mega-menu header for a deep catalog — Nike
Nike stacks two rows: a slim utility bar holding store, support, and account links, then a main bar of broad shopping categories. Each opens a full-width mega menu split into shoes, clothing, and accessories, with sport and collection filters inside. Search, favorites, and the bag are anchored on the right. A mega menu solves the problem of a catalog too deep for ordinary dropdowns: it exposes a whole category structure at once, so shoppers land two or three levels down in a single move. It suits large retail and any site where category browsing drives most of the revenue.
11. Adaptive header that collapses on mobile — Apple
Apple keeps its header to a single line: the logo, one link per product family, separate links for Store, Entertainment, and Support, and search and basket icons at the right. On narrow screens, the product list folds into a menu icon while the logo, search, and basket stay put — the three things a shopper reaches for most. Nothing overlaps the content below. This is the pattern to copy for retail and product marketing sites with a fixed set of categories. Because the collapsed state keeps shopping controls visible, the experience stays usable at every width instead of hiding the path to purchase behind a hamburger menu.
12. Minimal sticky header — Linear
Linear’s header stays sticky as users move through the site, with a minimal black treatment that keeps navigation clear without competing with the content. A few of the labels open dropdowns, the rest link straight through, and the sign-in and sign-up actions anchor the right. As it is sticky, the sign-up path follows the visitor down a long marketing page without a scroll back to the top. This pattern works well in product-led SaaS with long, visual landing pages, where the header has to stay available without stealing attention from the product shots.
13. Hamburger header — Wikipedia
Wikipedia keeps its site-wide navigation behind a hamburger icon at the far left. The top row holds only the wordmark, a search field, and links for donating, creating an account, and signing in. The choice is deliberate: it prioritizes the article over the site’s own navigation, since most visitors arrive to read one page rather than browse the whole site. What follows you down the page isn’t the header but the Contents sidebar. This approach suits documentation and publications where the reader’s goal is to consume a specific piece of content start to finish.
14. SaaS transparent header with primary CTA — Squarespace
Squarespace overlays its navigation directly on the hero image, with no background band. A few broad labels open dropdowns, and a primary sign-up CTA closes the row. Removing the header’s background makes the page feel like one uninterrupted image, which suits any product whose pitch is visual quality. Yet it’s worth keeping in mind that transparent headers only work under two conditions: the imagery behind them has to hold consistent contrast, and the header needs a solid state once the user scrolls onto lighter content.
15. Accessibility-first header — GOV.UK
GOV.UK strips its header to almost nothing: the crown wordmark, a single menu toggle, and a search icon on a solid blue band. There is no CTA, no mega menu, and no marketing. The reasoning is scale — the site serves an entire population, including people on old devices, slow connections, and screen readers, so the header is built to work everywhere. A skip link jumps straight past it to the content. This suits public services, documentation, and any site where failing to reach the right page is a real cost.
{{banner-2}}
Header design best practices
The header is the website’s main navigation tool, so it should be clear and intuitive. Research from Google and the University of Basel found that users form aesthetic judgments about a website within just 50 milliseconds, and that low visual complexity and a familiar layout are what those snap judgments reward. The study measured whole pages rather than headers — but the header is the densest thing in that first glance.
Keep navigation clear and focused
Good navigation is crucial: if users don’t understand how to find what they came for, they leave. A UX audit can help identify where navigation creates friction or confusion. Everything else about your navigation links, menu, and search depends on your website’s purpose.
If you want to hold attention on the CTA, a video introduction, or a single message, hiding the menu behind a hamburger button keeps the header uncrowded. Many businesses, though, need instant access to key links, and there the menu should stay visible. Sometimes it is vertical, on the left, when there isn’t enough space at the top or the right of the screen serves as a workspace.
A well-designed vertical navigation should be left-aligned, keyword front-loaded, and visible.
Yet, it’s worth bearing in mind that two things can reliably break a header. The first is too many buttons: extra navigational links and competing CTAs confuse visitors and blur the site’s main idea. The second is an overly complicated structure. If your site has many pages, don’t try to fit the entire sitemap into the header. It should carry only the essential products and the top-level items linking to your main pages.
Make the primary CTA easy to notice
A call-to-action leads website visitors to a specific next step. Where it sits, how big it is, and what it says all change whether people take it — but the first requirement is that it doesn’t look like everything around it.
Normally, a proper CTA should be:
- Noticeable and clear
- Brief
- Instantly accessible
- Communicating an understandable message
Make sure your CTA isn’t lost among the other header elements. It should be one of the first things users see.
If you serve more than one type of buyer, a second CTA can help as well (remember a self-serve action beside a sales-contact route, as in the Asana example above). Beyond two, the choice starts costing more than it gains — Intercom’s five-action right side is what that looks like in practice.
Ensure readability, contrast, and accessibility
The typeface you choose has an outsized effect, because a header carries very little text and each word has to work. Make sure it is readable at small sizes, holds up against the background, and doesn’t blend into an image behind it.
It’s also important to make the headline appeal to users and grab attention. A large — or even extra-large — font size is one of the common ways to do it. Bold sans-serif is better for a tech-forward, modern header design, while elegant serif suits brands leaning into heritage, editorial, or a more premium tone.
Readability is only half the job, though. A header is the first thing a screen reader announces and a keyboard user tabs into, so it needs to work for both. WCAG asks for 4.5:1 contrast on body-sized text and 3:1 on icons, UI components, and large text — check the header against both, especially over photography or gradients. Give every link and button a visible focus state and make dropdowns openable and closable from the keyboard, not hover alone. Tap targets need 24×24 CSS pixels for WCAG 2.2 AA and 44×44 for AAA; in a header, the larger figure is worth hitting, since it’s also roughly a fingertip.
Design for mobile and responsive behavior
A header that works on a desktop monitor rarely survives a 375px screen unchanged. Decide early what the small version keeps and what it gives up.
Most secondary links, such as deep category pages, resources, company information, and language switchers, can move into the hamburger menu without anyone missing them. What should not move is the primary CTA. If “Book a demo” or “Add to bag” is how the page makes money, it stays visible at every width, alongside the logo and, on commerce sites, search and cart. Burying the conversion path behind an icon is the most expensive mobile header mistake there is.
Vertical space matters as much as horizontal. A menu, logo, search field, and two buttons that all fit side by side comfortably on the desktop can stack into a block that swallows half a phone screen and pushes the hero out of view. Nothing in the header should overlap the content beneath it or cover the first line of the page.
Finally, it’s worth testing across the range rather than at two sizes. Headers tend to break in the middle — around 900 to 1100px, where the desktop layout is running out of room but the mobile layout hasn’t taken over yet. A useful set to check: 375, 768, 1024, 1280 and 1440.
Use sticky or fixed headers only when they improve navigation
A sticky header earns its place when the page is long enough that scrolling back to the top is a real cost — documentation, long-form articles, category listings, and marketing pages with several screens of content. On a short page, it solves a problem the visitor never had and takes up space for the privilege.
Because it is permanently on screen, keep it under about 64px on desktop and 56px on mobile; past that, it’s taking a visible bite out of every screen on the site. The usual fix is to shrink it on scroll, dropping to the logo, a condensed menu, and the primary CTA. Watch out for anchor links landing behind it as well — a fixed header will cover the heading a visitor just jumped to unless you set scroll-margin-top on the target to the header’s height.
On mobile, where vertical space is scarcest, it is better to keep the sticky version tighter still or let it hide as the user scrolls down and reappear when they scroll up. That way it stays available without competing with the content for the screen.
Keep header behavior consistent across pages
Visitors learn a header once. Every element should stay where they found it: the logo returning home from the top left, the CTA in the same corner, and search and account controls behaving identically on the pricing page and the blog.
A header isn’t finished when it looks right, but when no one has to think about it.
That applies to language as much as position. If a menu item is called “Solutions” on the homepage, it should not become “Use cases” two clicks later, and a dropdown that opens on click in one place should not open on hover in another. Small inconsistencies like these make people re-read a menu they had already learned.
Deliberate variations are fine, like a checkout page that strips the nav to reduce distraction or a logged-in area with its own controls. Unintentional drift is the problem: sections built in different years, each carrying its own header, asking visitors to relearn the site page by page. When these inconsistencies become widespread, a website redesign can address them as part of a unified system.
Final thoughts
The best website headers don’t just organize navigation; they also bring together brand identity, key destinations, calls to action, and responsive behavior in one clear interface. The right balance depends on what users need from the site and how they interact with it. If you’re looking to create a header that feels both distinctive and effortless to use, the Halo Lab team can help turn these principles into a thoughtful web design. Just reach out to discuss your project.
FAQ
Why invest in branding services services services?
What is a website header?
A website header is the section at the top of a page that gives visitors quick access to important parts of the site. It typically contains the logo and main navigation and may also feature search, account controls, or a primary action. Unlike the hero section below it, the header usually remains consistent across multiple pages.
What should a website header include?
At minimum, a logo that links home and navigation to your main pages. Beyond that, it depends on what visitors need to reach quickly: a primary CTA on marketing sites, search and a cart on e-commerce, account controls on anything with logins. Language switchers, contact details, and social links are worth including only if people genuinely use them — every extra element makes the rest harder to see.
What makes a good website header?
A good header keeps navigation labels predictable, gives the primary action a visible position, holds enough contrast to read against whatever sits behind it, and behaves the same way on every page. It should also survive being narrow — a header that only works at full desktop width isn’t finished.
Should a website use a sticky header?
Only when it earns the space. On long pages, like documentation, articles, category listings, multi-screen landing pages, keeping navigation and the CTA in reach saves real effort. On a short page, it takes up room without solving anything. If you do use one, keep it compact, shrink it on scroll, make sure it doesn’t cover headings that anchor links jump to, and keep the mobile version tighter than the desktop one.
How tall should a website header be?
There is no universal number, so any fixed figure should be treated with caution. The right height depends on what the header needs to hold: your logo, navigation, search, utility bars, and whether it’s sticky. Sticky headers should generally be shorter because they take up space throughout the page. Device matters too: mobile headers usually need to be more compact. As a practical range, 64–90px on desktop and 56–64px on mobile works for many sites.
How do you design a mobile-friendly website header?
Decide what the small version keeps. The logo, the primary CTA, and, on commerce sites, search and cart should stay visible; secondary links can move into a hamburger menu. Keep tap targets comfortable, make sure nothing in the header overlaps the content beneath it, and don’t let a stacked header swallow the top half of the screen. Test at the awkward in-between widths, not just phone and desktop, since that is where headers usually break.
Sum UP
