How to Design a Website Header: A Complete Guide

I've designed headers for Kodo, Flowe AI, and various websites. What I learned: a good header is invisible. It works so well that people don't notice it—they just use it.

Headers are functional first, beautiful second. They need to help people navigate, find information, and take action. Here's how to design one that does all three.

The Logo: Left Side Always

People expect logos on the left side of headers. It's a web convention. Putting it anywhere else confuses people. Keep it simple, recognizable, and clickable (it should link to the homepage).

I keep the Kodo logo small but clear. It doesn't dominate the header, but it's always visible. The logo should be recognizable at small sizes—if it's not, simplify it.

Navigation: Keep It Simple

Most websites have too many navigation items. I limit headers to 5-7 links max. More than that and people get overwhelmed. Focus on the most important pages.

I organize navigation by importance: Home, Product, Pricing, About, Contact. That's it. Everything else goes in a footer or dropdown menu. Keep the header clean and focused.

The CTA Button: Right Side

Call-to-action buttons (like "Sign Up" or "Get Started") go on the right side of the header. This is where people expect to find action items. Make it stand out with a contrasting color.

I use a bright, contrasting color for the CTA button. On Kodo's header, it's black on a light background. It's impossible to miss and clearly communicates "this is important."

Mobile: The Hamburger Menu

On mobile, navigation collapses into a hamburger menu (three horizontal lines). This is standard web practice. Don't try to be creative here—people expect hamburger menus on mobile.

I design mobile headers to be even simpler: logo on left, hamburger menu on right, CTA button below. Keep it minimal. Mobile screens are small—every pixel counts.

Sticky vs. Static: Choose Wisely

Sticky headers (that stay visible when scrolling) are convenient but can be annoying if they're too large. I use sticky headers but keep them thin—about 60-80px tall.

Static headers (that scroll away) give more screen space but require scrolling back to navigate. For most websites, sticky is better. Just keep it minimal.

Typography: Readable and Consistent

Header text should be readable and consistent. I use the same font family as the rest of the site, just slightly smaller. Navigation links are usually 14-16pt.

Also, use clear link states: default, hover, and active. People need to know where they are and what's clickable. Subtle hover effects (like color changes) help with this.

Color: Subtle Background

Headers don't need to be flashy. A subtle background color (or transparent with a border) works best. The content is more important than the header design.

I use a light background with a subtle border for Kodo's header. It's clean, professional, and doesn't compete with the main content. Sometimes the best design is invisible.

Final Thoughts: Function Over Form

A good header helps people navigate. It doesn't need to be flashy or creative. It needs to be clear, consistent, and functional. If people can find what they're looking for, you've succeeded.

Keep it simple, keep it consistent, and keep it functional. The best headers are the ones people don't notice—they just work.