Pick a website header that fits the job.
Most small-business sites need a short header: your name, a few clear links, and one main action.
Short menu. Desktop view. Menu centered. Warm theme. Get a quote. Top bar off.
Change one layer at a time.
Choose the structure first. Then set the alignment, action, and theme.
Pick the structure.
This is how the header is built. Start with a short menu. Move up only when visitors need more paths.
Set the alignment.
The menu can sit in the center, group on the right, or make room for a centered logo. Test the real words before you choose.
Pick the main action.
The one button you want people to press. Call, book a time, or get a quote. Match the label to the next page.
Pick a theme.
The colors, type, and button shape. A theme changes the mood, not the job. You can swap it any time.
Add-ons are not types. A sticky header or an announcement bar can sit on top of any structure. Add one when it earns its space on a phone screen.
Four header structures cover most sites.
Start small. Move to a larger structure when you can name the person who needs it.
Search-first header
Add search when people know the item, but not the page.
A store with many parts may need a wide search field and a row of product groups. A five-page plumber site does not. Search should solve a real finding problem.
Use it when people return to find a product, article, or answer.
Skip it when every useful page already fits in the main menu.
On a phone: use a clear Search button or put the field at the top of the open menu.
Utility bar with main menu
A utility bar is for repeat tasks, not spare links.
A school may keep Parent portal, Lunch menu, and Staff in a small row. The main menu can stay focused on Learning, Admissions, and school life.
Use it when one group needs a few links most visitors do not.
Skip it when the extra row holds a slogan, social icons, or overflow.
On a phone: put both groups in one menu. Keep a small heading so the split still makes sense.
The button must tell the truth.
The main action is a promise about what happens next. Change the words, not the whole header.
Use it when a call is the normal first step and someone can answer.
Use it when people can choose a real time without waiting for a call back.
Use it when the next page asks for the details needed to price the work.
If the next page is a message form, do not label the button Book. If the phone often rings out, do not make Call the first thing everyone sees.
Test the real header before you keep it.
Use the real name, real links, and real next step. A neat sample logo proves very little.
Use a phone and your thumb.
Open and close the menu. Tap the main action. Try the longest business name.
Use a keyboard.
Tab through every control. Open the menu, press Escape, and watch where focus returns.
Follow every jump link.
A sticky header can cover the heading someone tried to reach. Test the full page.
Show the current page. Use a line, soft background, or darker text. People should be able to tell where they are without making the whole menu jump.
Questions people ask about website headers.
What is a website header?
The header is the bar at the top of every page. It holds your name or logo, the main links, and often one action button. People use it to move around your site and to get back home.
What is the difference between the header and the menu?
The menu is the list of links. The header is the whole top bar. It holds the menu, plus your name and the main action button.
How many links should a website header have?
Use only the links most visitors need to choose their next page. Test the real logo, link names, and main action together. If they no longer fit, group the links or move the less useful ones to the footer.
Should the logo link to the home page?
Yes. People often use the logo to return to the home page. You can still include a Home link when your audience may not know that pattern.
Do I need a search box in the header?
Add search when people arrive looking for one item among many. A store, recipe site, or help center may need it. A small service site usually does not.
Should I hide the menu on a desktop?
Usually not. A desktop has room to show the main links. Hiding them adds a step without giving much back. On a phone, the menu button earns its space.
How tall should a website header be?
Make it tall enough to read and tap, but short enough to leave the page in view. Test the real logo and real link names instead of copying a height from another site.
Keep your website. Fix what's holding it back.
Enter your current website and start with everything you already have.
Free. No credit card. Nothing changes until you publish.