Most articles about website header design ideas hand you a gallery and let you guess. That is fine for inspiration, but it does not answer the real question: which header layout should my business actually use?
A header is not decoration. It is the navigation system, the trust signal, and the primary conversion path of your site, all packed into roughly 60 to 100 pixels of vertical space. A law firm and a streetwear brand should not use the same one.
Below are 11 header layout patterns, each broken down the same way: how it is structured, where the call to action sits, how it behaves on mobile, and which type of business it suits. Pick the one that matches your traffic and your sales process, not the one that looks prettiest in a Dribbble shot.
Before You Pick a Layout: What Every Header Must Do
Whatever pattern you choose, the header has four non-negotiable jobs:
- Identify the site instantly (logo, top left in most Latin-script markets, linked to the homepage).
- Orient the visitor (primary navigation with 4 to 7 top-level items, ideally).
- Convert (one visually dominant CTA, not three competing ones).
- Reassure (phone number, location, opening hours, or trust markers when the business depends on them).
A useful rule: if you cannot explain what each element in your header is there to do, remove it. Header clutter is the single most common reason bounce rates climb on service sites.
Quick Comparison: 11 Header Layouts at a Glance
| Layout | Best for | CTA position | Mobile difficulty |
|---|---|---|---|
| 1. Classic left logo, right nav | SaaS, agencies, most SMBs | Far right, after nav | Low |
| 2. Centered logo, split nav | Fashion, hospitality, premium brands | Far right icon or button | Medium |
| 3. Stacked centered header | Editorial, magazines, blogs | Top right (subscribe) | Medium |
| 4. Utility bar + main nav | Healthcare, trades, B2B, multi-location | Utility bar and main bar | Medium |
| 5. Mega menu | Ecommerce, universities, enterprise | Right of the bar, plus in-panel | High |
| 6. Transparent overlay | Hotels, real estate, architecture, video-first | Right, outlined then solid on scroll | Medium |
| 7. Sticky shrinking header | Long-form landing pages, SaaS, courses | Persistent right button | Low |
| 8. Floating pill or island header | Startups, product launches, portfolios | Inside the pill, right end | Medium |
| 9. Hamburger-first minimal | Creative studios, photographers, one-product brands | Inside the overlay menu | Low |
| 10. Vertical sidebar header | Portfolios, galleries, dashboards | Bottom of sidebar | High |
| 11. Search-first header | Marketplaces, large catalogs, help centers | Account and cart, far right | Medium |
1. The Classic: Left Logo, Right Navigation
Structure
Logo anchored left, primary navigation aligned right, single CTA button at the far right edge. One row, usually 70 to 90 pixels tall on desktop.
Where the CTA sits
At the end of the navigation, styled as a filled button so it reads as an action, not a link. Because Western reading patterns end at the right edge, this position gets natural attention after the visitor scans the menu.
Mobile behavior
Logo shrinks and stays left, navigation collapses into a hamburger icon on the right. The best implementations keep the CTA visible next to the hamburger as a compact button rather than burying it inside the menu. The piece Website Header Design: Best Practices and Examples makes a good next read.
Best for
SaaS products, marketing agencies, consultants, and the majority of small and medium businesses. It is predictable, and predictable is a feature. If you are unsure which of these website header design ideas to use, start here and earn the right to get fancier.
2. Centered Logo With Split Navigation
Structure
The logo sits dead center, with navigation items split into two groups on either side. Usually 3 links left, 3 links right, plus icons at the far edges.
Where the CTA sits
Far right, often reduced to icons (cart, account, search) or a small text link such as Book or Reserve. This layout deliberately gives the brand mark more weight than the CTA, so it is not the right choice when conversion pressure is high.
Mobile behavior
This is the pattern that breaks most often. The centered logo has to stay centered while the hamburger moves left and the cart or CTA icon moves right. Test at 320px width: long wordmarks will collide with the icons.
Best for
Fashion labels, boutique hotels, restaurants, jewelry, and any brand where the name itself is the main asset. Symmetry reads as premium.
3. Stacked Centered Header (Logo Above the Menu)
Structure
Two rows: large centered logo on top, a centered horizontal menu underneath, often separated by a thin rule. Total height can reach 140 pixels, which is a real cost above the fold.
Where the CTA sits
Usually a subscribe or newsletter button pinned to the top right corner, or a search icon on the opposite side. Some publishers add a slim ribbon above the logo for promotions.
Mobile behavior
Collapse aggressively. Keep the logo centered, drop the second row entirely into a hamburger, and consider a horizontally scrollable category strip instead of a menu drawer, since editorial readers browse by topic.
Best for
Magazines, news sites, recipe blogs, and content-led brands where masthead authority matters more than lead capture.
4. Utility Bar Plus Main Navigation (The Double-Decker)
Structure
A slim top strip (28 to 40 pixels) carrying secondary information: phone number, opening hours, location selector, language switcher, login. Below it, the main header with logo, navigation, and CTA.
Where the CTA sits
Two levels of action. The utility bar holds low-intent utilities and the click-to-call link. The main bar holds the primary conversion button, for example Request a Quote or Book an Appointment.
Mobile behavior
Do not stack both bars on mobile. Keep the single most valuable utility item, almost always the tap-to-call number or the address, and push the rest into the menu. On phones, a persistent call button often outperforms every other element on the page for local service businesses.
Best for
Dental and medical practices, plumbers, electricians, law firms, logistics companies, multi-location retailers, and B2B suppliers with a login area.
5. The Mega Menu Header
Structure
A standard header bar where one or more top-level items expand into a full-width panel with columns, categories, thumbnails, and often a promotional block on the right.
Where the CTA sits
Two places. The persistent CTA (cart, account, or Get a demo) stays right of the bar. Inside each panel, a featured card or promo tile acts as a secondary CTA that pushes visitors toward high-margin categories.
Mobile behavior
Mega menus must become progressive drawers on mobile: tap a category, the panel slides in, a back arrow returns to the previous level. Never try to render three columns on a phone. Also make sure the first tap on a parent item opens the panel rather than navigating away.
Best for
Ecommerce stores with more than 30 SKUs, universities, hospital networks, enterprise software with multiple product lines, and marketplaces.
Watch out for
- Hover-only triggers break on touch devices and hurt keyboard accessibility. Support click and focus states too.
- A mega menu with 60 links dilutes internal link equity. Curate rather than dump your sitemap.
6. Transparent Overlay Header
Structure
The header sits on top of a full-bleed hero image or video with no background of its own. Logo and links are rendered in white or a light tint. On scroll, the header gains a solid or blurred background so text stays readable.
Where the CTA sits
Right side, usually as an outlined (ghost) button over the hero, switching to a filled button once the header becomes solid. That state change is what keeps it visible against unpredictable page content.
Mobile behavior
Hero images crop differently on phones and often push a busy area behind your logo. Fix this with a subtle top gradient scrim, roughly 40 percent black fading to transparent over the top 120 pixels, so the header never becomes unreadable.
Best for
Hotels and resorts, real estate developments, architecture and interior design studios, event venues, and any business selling an experience through imagery.
Accessibility note
Contrast ratio still applies over images. Aim for at least 4.5:1 between the header text and the darkest and lightest points of the underlying image. For the wider picture, see Website header best design practices and examples.
7. Sticky Shrinking Header
Structure
Starts tall, then compresses on scroll: the logo scales down, padding tightens, and secondary items fade out, leaving logo, condensed nav, and CTA. Often combined with a hide-on-scroll-down, show-on-scroll-up behavior.
Where the CTA sits
Right side, and it stays there permanently. This is the whole point of the pattern: on a 4000 pixel long sales page, the visitor is never more than one tap from converting.
Mobile behavior
Keep the compressed height under 56 pixels so it does not eat the small viewport. Use the hide-on-scroll-down technique to return screen space while reading, and reveal the header the moment the user scrolls up, which is a strong intent signal.
Best for
Long landing pages, SaaS pricing pages, online courses, coaching offers, and any site where the decision happens far below the fold.
8. Floating Pill or Island Header
Structure
The header detaches from the top edge and floats as a rounded container with a shadow or a frosted glass effect, inset 16 to 24 pixels from the sides. Content inside follows the classic logo-nav-CTA order.
Where the CTA sits
Inside the pill at the right end, sometimes as a second smaller pill in an accent color. Because the container is narrow, you are limited to 4 or 5 nav items, which forces useful discipline.
Mobile behavior
Shrink the pill to logo plus menu icon, or move it to the bottom of the screen as a floating bar within thumb reach. Bottom-anchored navigation is now common in app-like interfaces and tests well on phones.
Best for
Startups, product launches, design portfolios, and modern brands that want to look current without abandoning conventional navigation logic. This is one of the more distinctive website header design ideas going into 2026, but it needs a simple site structure to work.
9. Hamburger-First Minimal Header
Structure
Only three elements on desktop: logo left, one or two words center or right, menu icon far right. Clicking the icon opens a full-screen overlay with large typography, sometimes with imagery previewing each section.
Where the CTA sits
Inside the overlay, usually as the last and largest item (Start a project, Contact). Some studios keep a tiny persistent contact link outside the menu for direct-intent visitors.
Mobile behavior
This layout is the easiest to make responsive because desktop already behaves like mobile. The overlay just becomes full width. Watch tap target sizes: 48 by 48 pixels minimum.
Best for
Creative studios, photographers, architects, single-product brands, and personal portfolios. Avoid it for lead-generation sites: hiding navigation on desktop consistently reduces page depth and measurable conversions for service businesses.
10. Vertical Sidebar Header
Structure
Navigation runs down the left (occasionally right) edge as a fixed column, 200 to 280 pixels wide, with the logo at the top and social or legal links at the bottom. The content area scrolls independently.
Where the CTA sits
Bottom of the sidebar, or pinned as the last item so it stays visible without scrolling the column. Some designs place a small avatar or contact block there instead.
Mobile behavior
The sidebar cannot survive on a phone. It converts into a standard top bar with a hamburger, or a slide-in drawer. Because the desktop and mobile experiences diverge so much, budget for two designs rather than one.
Best for
Visual portfolios, gallery and museum sites, documentation hubs, and app dashboards where vertical space for content matters more than horizontal space.
11. Search-First Header
Structure
The search field is the dominant element, occupying the center of the header bar, with the logo compressed to a mark on the left and account, wishlist, and cart icons on the right. Categories often sit in a secondary row below.
Where the CTA sits
The search field is the CTA. Secondary actions (cart, account, Sell with us) live at the far right. Adding placeholder suggestions such as Search 12,000 parts increases usage measurably.
Mobile behavior
Two valid approaches: keep a persistent full-width search input below the logo row, or use a search icon that expands to a full-screen search overlay with recent queries and suggestions. For catalogs over a few hundred items, keep it persistent.
Best for
Marketplaces, auto parts and industrial suppliers, ticketing platforms, job boards, help centers, and any store where visitors arrive knowing what they want.
How to Choose: Match the Header to the Buying Behavior
- Ask how visitors buy. Browse-driven catalogs need mega menus or search-first headers. Decision-driven services need a persistent, sticky CTA.
- Count your top-level pages. Under 6 pages: classic or floating pill. 7 to 15: utility bar plus main nav. Over 15 categories: mega menu.
- Check your traffic split. If more than 65 percent of sessions are mobile (typical for local services and retail), design the mobile header first and let desktop inherit.
- Decide what a conversion is. Call, form, booking, add to cart, or subscribe. That single action owns the most contrasted element in the header. Everything else is a text link.
- Respect the fold. Keep desktop headers under 100 pixels tall and mobile headers under 64 pixels so the hero message still lands.
Header Mistakes That Quietly Cost Conversions
- Three CTAs of equal weight. Call, chat, and quote buttons all styled identically produce no click at all. Rank them.
- A logo that is not a homepage link. Still one of the most common bugs on custom builds.
- Sticky headers taller than 80 pixels. On a laptop that swallows a tenth of the viewport on every scroll.
- Hover-only mega menus. They fail on touch and for keyboard users.
- Nav labels written for insiders. “Solutions” and “Platform” test poorly against plain labels like “Pricing” and “What we do”.
- Layout shift on load. Reserve the header height in CSS so the page does not jump, which protects your Core Web Vitals score.
- Ignoring the notch and safe areas. Fixed headers on iOS need safe-area padding or content hides behind the status bar.
Practical Sizing Reference
| Element | Desktop | Mobile |
|---|---|---|
| Header height | 70 to 100 px (sticky: 56 to 72 px) | 48 to 64 px |
| Logo height | 32 to 48 px | 24 to 32 px |
| Nav font size | 15 to 17 px | 17 to 20 px in drawer |
| Tap targets | Not critical | 48 x 48 px minimum |
| Top-level items | 4 to 7 | Same, plus CTA |
FAQ
What should be in a website header?
At minimum: a clickable logo, primary navigation of 4 to 7 items, and one clear call to action. Add a phone number, location, or login only if your business model depends on them. Anything that does not help a visitor identify you, navigate, or convert should be moved to the footer.
How big should a website header be?
Aim for 70 to 100 pixels tall on desktop and 48 to 64 pixels on mobile. Sticky headers should compress to around 56 to 72 pixels after scroll. Anything taller starts pushing your value proposition below the fold, which is the most expensive real estate on the page.
Should my header be sticky?
Yes for long pages, ecommerce, and any site where the CTA is the reason the page exists. It is less necessary for short brochure sites or portfolios where scrolling is short and the visual experience matters more than persistent navigation.
Is a centered logo bad for SEO or usability?
It is neutral for SEO. For usability, a centered logo is slightly slower to locate than a left-aligned one because it breaks the expected F-pattern scan, but the difference is small and worth it for brands where symmetry supports a premium positioning.
How many links should be in the main navigation?
Four to seven top-level items is the practical sweet spot. Beyond that, group items into a mega menu or dropdowns. Long flat menus create decision fatigue and make mobile drawers unmanageable.
Should the header CTA be a button or a link?
A filled button with a color that appears nowhere else in the header. If your CTA looks like the navigation items, it will be scanned as navigation and ignored as an action.
Can I use a transparent header on every page?
Only on pages that open with a full-bleed image or video. On standard content pages, a transparent header floats over white space and looks broken. Set it as a per-page option in your theme, and give it a solid state on scroll.
Need a Header That Actually Converts?
At Zach’s Web Designs we design and build headers as conversion components, not as decoration: mobile-first structure, accessible menus, measurable CTA placement, and no layout shift. If you want a second opinion on your current header, get in touch and we will audit it against the 11 patterns above and tell you which one fits your business.