A website header is the strip across the top of every page that holds your logo, your menu and the one thing you want visitors to do next, such as call you or book. If those three things work on a phone as well as on a computer, your header is doing its job.
To see what that looks like on real sites, we opened the homepages of 20 well-known home-service and local brands on 19 October 2026, on a desktop screen and on an iPhone-size screen, and checked seven things in every header. The results are below, together with what usability research says about logos, sticky headers, hamburger menus and sizes, a free builder that writes the header code for you, and the exact clicks to change your header in WordPress, Wix, Squarespace and Shopify.
What is a website header?
A website header is the top section of a website that repeats on every page. It usually holds the logo, the main navigation menu, and contact or action buttons. In code it is the <header> element, which MDN describes as “introductory content, typically a group of introductory or navigational aids” (MDN). When it sits at the top of the page, screen readers announce it as the site’s banner, so blind visitors can jump straight to it.
People mix up three things that live at the top of a page. Here is the difference in one picture.
- Header
- The bar with logo, menu and buttons. Same on every page.
- Hero
- The big first section under the header. Different on each page.
- Heading
- The page title text (the H1) inside the hero. One per page, written for that page.
What should a website header include?
Every header needs a logo and a way to move around the site. Everything else depends on what your visitors came to do. For a local business that is usually “call or book”, for a shop it is “find and buy”, for an information site it is “find and read”.
| Element | Local service | Online shop | Blog or info site |
|---|---|---|---|
| Logo linked to home | Must have | Must have | Must have |
| Main menu | Must have | Must have | Must have |
| Phone number (tap to call) | Must have | Optional | Skip |
| One action button | Must have (Book, Get a quote) | Optional | Optional (Subscribe) |
| Search | Skip | Must have | Useful |
| Cart and account | Skip | Must have | Skip |
| Location or service area | Useful | Skip | Skip |
Three placement rules come straight from usability research:
- Logo top left. The Nielsen Norman Group found users are 89% more likely to remember logos in the top-left corner than logos on the right (NN/g, 2016).
- Phone visible, contact easy. NN/g’s advice is to put a Contact link in the main or utility navigation and: “Don’t hide or remove phone numbers” (NN/g, 2019).
- Search and small tools top right. Search, sign-in and similar tools belong in the top-right corner, where people look for them (NN/g, NN/g).
Should the logo be centered instead? It looks elegant, but it costs you clicks.
Logo on the left
more likely to be remembered than a logo on the right.
Logo in the center
as likely to fail to get back to the homepage in one click.
20 real website header examples from local businesses
Most header galleries show software companies and design studios. If you run a local business, the headers to study are the ones built to make the phone ring. So we checked 20 national home-service and local brands, from Roto-Rooter to Great Clips.
How we checked: each homepage was loaded from a US connection on 19 October 2026 in a Chromium browser at 1440 pixels wide and at iPhone size (390 pixels). For every header we looked, by hand, at the screenshot at the top of the page and again after scrolling down. Homepages change often, so treat this as a snapshot.
Same brands, two screens: what disappears on a phone
What stood out:
- The phone number drops off on phones. 16 of 20 brands show a phone number in the desktop header, but only 11 keep a call button visible on a phone without opening the menu. That is the opposite of what a local business needs, because a phone is where calling takes one tap.
- Every brand hides the full menu on phones. All 20 use a menu icon. The difference is what they leave outside it.
- Seven brands keep both “call” and “book” visible on a phone: Roto-Rooter, Mr. Rooter, Molly Maid, Two Men and a Truck, Mr. Electric, Merry Maids and Mosquito Joe. Four of them (Mr. Rooter, Molly Maid, Mr. Electric, Mosquito Joe) belong to the same franchise group and share one header layout.
- Buttons use plain verbs: Schedule, Book Online, Free Quote, Get a Quote, Book Now, Check In Online, Find a Salon.
- Sticky is the norm. 16 of 20 desktop headers stay on screen as you scroll. Several, including Mr. Rooter, Molly Maid and Merry Maids, shrink into a slimmer bar once you scroll.
Here are three of the phone headers that keep the next step outside the menu, exactly as they looked on 19 October 2026:
A second row just for the next step: location, a red Schedule button and a dark Call button, both easy to hit with a thumb.
A thin top strip carries “Find a location” and “Call”; the main bar keeps one bright Free Quote button next to a labelled menu icon.
The whole bar is buttons: Easy Online Booking, Click to Call and Menu, each with an icon and a word, so nobody has to guess.
Big brands follow the same three jobs, tuned to what their visitors do. Apple’s desktop header is a single slim line (it measured 44 pixels tall on 19 October 2026) because people come to browse products. Airbnb puts the search box in the header, because searching is the product. IKEA adds a strip for your ZIP code and store, plus a search bar. Stripe ends its header with two buttons, “Sign in” and “Contact sales”, because those are its two kinds of visitor.
Types of website headers (and which one fits you)
Most headers are one of six layouts. Pick by what your visitors need, not by what looks trendy.
1. Classic single row
Logo left, menu in the middle, button right. Best for: most local service businesses and small company sites.
2. Two rows with a top strip
A thin strip above for phone, hours or service area. Best for: trades, clinics and multi-location brands (Two Men and a Truck, IKEA).
3. Centered logo
Menu split on both sides of a centered logo. Best for: restaurants, boutiques and brands where looks matter more than clicks. Remember the 6× finding above.
4. Menu icon (hamburger)
Logo plus a menu icon; the links open in a panel. Best for: phones. On a computer it hides your pages (see the research below).
5. Mega menu
Menu items open into wide panels with many links. Best for: shops and businesses with many services or locations.
6. Transparent over a photo
The header sits on top of the hero image and turns solid when you scroll. Best for: portfolios, hotels and venues with strong photos. Check that the text stays readable on every image.
Should your header be sticky?
Usually yes, if it stays small. A sticky (fixed) header stays at the top while visitors scroll, so the phone number and button are always one tap away. The Nielsen Norman Group says sticky headers help when they are “unobtrusive, high-contrast, minimally animated”, use “the smallest amount of space that still provides appropriately readable text and tappable target sizes”, and have an opaque background (NN/g, 2021).
- Keep it slim. Many brands shrink the header into a thinner bar once you scroll, as this demo does.
- Or let it come back. A “partially persistent” header hides as you scroll down and reappears when you scroll up (NN/g). Squarespace calls this “Scroll back”.
- Keep Call and Book in it. They are the reason to make it sticky in the first place.
One catch: a sticky header can cover the very thing a keyboard user just moved to. WCAG 2.2 success criterion 2.4.11 (level AA) says a focused item must not be “entirely hidden due to author-created content”, and the W3C names “sticky headers” as a typical cause (W3C). The fix is one line of CSS that tells the browser how tall your header is (MDN: scroll-padding-top).
Without the fix
The focused link slides under the bar. Fails WCAG 2.4.11.
With scroll-padding-top
The page stops scrolling below the header, so the link stays visible.
html { scroll-padding-top: 90px; } /* use your header's height */Hamburger menu or visible menu?
On a computer, show your menu links. On a phone, a menu icon is fine for the full list, as long as your most important actions stay outside it. That is what the research shows: in NN/g’s study, hidden navigation was used far less than visible links, and content was harder to find.
How often people used the menu, by menu style
On a computer
27%
48%
50%
On a phone
57%
86%
For a local business the “combo” on a phone looks like the three examples above: logo, Call, Book, and a menu icon for everything else.
How big should a website header be?
There is no official header height. Size it to its contents: the logo should be readable, every link and button big enough to tap, and nothing more. Here are the numbers that do exist:
- Buttons and links: at least 24 × 24 CSS pixels (WCAG 2.2, level AA), and 44 × 44 for the stricter AAA level (W3C 2.5.8, W3C 2.5.5). Apple’s default control size is 44 × 44 points (Apple HIG), and Google suggests 48 × 48 dp with 8 dp between targets on Android (Google).
- Logo: Shopify caps logo images at 300 pixels wide (Shopify Help), a sensible ceiling for any site.
- Height: as a reference point, Apple’s desktop header measured 44 pixels tall on 19 October 2026. If yours is sticky, keep it as slim as possible, per NN/g.
- Width: the full width of the screen, with the content lined up to your page’s content width.
Why size for the phone first? Because that is where half your visitors are.
United States, September 2026
Worldwide, September 2026
Free header builder: make yours and copy the code
Fill in your details and the builder writes a complete, responsive header: menu links on a computer, Call, button and menu icon on a phone, a “skip to content” link for keyboard users, a sticky option with the scroll-padding fix, and a contrast check on your color. Copy it, or download it as a file you can open in any browser.
Paste the code where your theme lets you add HTML to the header (steps below), or hand it to your developer. Replace the links with your real page addresses.
How to add or change the header in WordPress, Wix, Squarespace and Shopify
Every site builder has its own header settings. These are the exact paths from each platform’s own help pages.
- Go to Appearance > Editor > Patterns. Your header is listed there as a template part (WordPress.org).
- Open the Header part. Click the logo, the Navigation block or the button to change them.
- To edit the menu, select the Navigation block; its Overlay menu setting decides when the links fold into a menu icon on small screens (WordPress.org).
- To use the builder’s code, add a Custom HTML block in the Header part, paste the code, then remove the old blocks. Save.
- Older themes (Astra, GeneratePress and others) keep header settings under Appearance > Customize instead.
- Open the Wix Editor and click the header at the top of any page.
- Click Settings and choose a scroll effect. “Freezes” means the header “remains on top of the page as visitors scroll up and down” (Wix Help).
- Drag your logo, menu and a button into the header. Add the phone number as text with a phone link.
- Switch to the mobile view and check that Call and your button are visible without opening the menu.
- Click Edit, hover over the header and click Edit site header (Squarespace Help).
- Click Add elements to add a button (Book, Get a quote) and set its link.
- Turn on Fixed position to make it sticky. “Basic” always shows it; “Scroll back” brings it back when visitors scroll up.
- Check the mobile preview before you save.
- Go to Online Store > Themes and click Edit theme (Customize).
- Select the Header section. The Header area holds “your header, announcement bar, and any apps or custom Liquid”, and it is shared by every page (Shopify Help).
- Set the logo and its width under Theme settings > Logo. Logos can be up to 300 pixels wide (Shopify Help).
- Choose the menu for the header and, if your theme offers it, the sticky option. Save.
Check your header in 60 seconds
Run these seven checks on your own site. Each one takes a few seconds and catches a problem visitors or Google will notice.
- Phone test. Open your homepage on your phone. Can you tap to call and tap your main button without opening the menu? Phone links should use
href="tel:...", which phones dial directly (MDN). - Thumb test. Every link and button is at least 44 pixels tall, or 24 at the very least.
- Keyboard test. Click the address bar and press Tab. The first stop should be a “Skip to content” link, which WCAG lists as a way to bypass repeated blocks (W3C 2.4.1). Only about 24% of pages have one, according to the HTTP Archive’s 2025 Web Almanac.
- Hidden-focus test. Keep pressing Tab down the page. If the focus ring ever disappears under your sticky header, add
scroll-padding-top. - Contrast test. Text in the header needs a contrast ratio of at least 4.5:1 against its background (W3C 1.4.3). The builder above checks your button color for you.
- Real links test. Menu items should be normal
<a href>links. Google says to use them and not JavaScript click events, because they help it understand your site’s structure (Google Search Central). - Jump test. Reload the page and watch the top. If a banner pops in and pushes the page down, that is a layout shift; web.dev advises reserving space for it (web.dev). Our free Core Web Vitals checker shows your layout shift score.
One more for local businesses: the phone number in your header should match the one on your Google Business Profile and directory listings, character for character. The free NAP consistency checker compares them for you.
Want a header, and a whole site, built around calls and bookings? See how our web design team builds local business websites, or browse our web design case studies. If you are still deciding on budget, our guide to website build costs and how to choose a web design company will help, and web design color theory explains how to pick your button color.
FAQs
What is the header of a website called?
It is usually called the site header, top bar or navigation bar, and sometimes the masthead. In HTML it is the <header> element, and when it sits at the top of the page assistive technology treats it as the banner landmark. Do not confuse it with headings, which are the titles (H1, H2) inside your page content.
How big should a website header be?
There is no standard height. Make it just tall enough for a readable logo and buttons that are at least 44 by 44 pixels (24 by 24 at the WCAG minimum). For reference, Apple’s desktop header measured 44 pixels tall in our check. If the header is sticky, keep it as slim as possible.
Should I put my phone number in the website header?
Yes, if customers call you. In our check of 20 local-service brands, 16 showed a phone number on desktop, but only 11 kept a call button visible on phones. Use a tap-to-call link (tel:) and keep it outside the mobile menu, because a phone is where calling takes one tap.
Should my logo be on the left or in the center?
On the left for most sites. Nielsen Norman Group found users were 89% more likely to remember logos placed top left than on the right, and that centered logos made people 6 times as likely to fail to reach the homepage in one click. Center it only when the look matters more than navigation.
Does the website header affect SEO?
Indirectly, yes. Google uses the links in your navigation to understand your site’s structure and to build sitelinks, so use plain HTML links to your key pages. A header that pushes content down as it loads can also hurt your layout shift score, which is part of Google’s Core Web Vitals.