Website headers are a vital part of your navigation and branding. It might not be what people spend most of their time looking at, but neither are book covers – yet people do buy books based on how they look (yes, contrary to that old saying).
Plenty of websites are under-utilising their headers though and in order to help prevent you making the same mistake, here’s 5 common mistakes people make with website headers from someone who does this for a living.
I’m Jack, I founded True North Web Design in 2025, and I build (and host and maintain) beautiful websites for creatives and professionals were reputation matters, designed with clarity and intention. If that sounds appealing to you, please don’t hesitate to reach out.
1. Mobile Burger Menu on the Wrong Side
I see this surprisingly often and to me, it shows a website that was assembled without much thought being given to what it is like to use. That is, on mobile, when the burger menu is on the left.
We live in an age where phones are almost the size of laptops and people don’t have fingers like rulers. It’s already necessary with most phones to awkwardly adjust your grip to tap a burger menu in the top right, but the top left often makes this a two-handed job unless you’re prepared to risk dropping your phone.
Something like about 90% of people are right-handed, so put the menu on the right hand side and make things just that bit more comfortable for the majority of your audience. Unless your website is specifically for people who are left-handed, then don’t – because the point really isn’t as narrow as right vs. left. It’s about serving your audience as well as you can.
2. Chunky Headers That Don’t Collapse
One of my least favourite things on a website after irritating cookie popups (or any popups, actually) is when there’s a humongous header that eats about half of the screen, leaving you to lean forward and duck as if somehow you can get your head under the header, to see the website behind it more clearly.
Unfortunately websites are not rendered in 3D and this isn’t like looking under a fencepost – that eyesore of a header will be in the way for your entire stay. Which will be about three seconds.
Most people don’t know how to edit the page to zap the header out the way, so they’re just going to leave.
Get rid of it, it’s a nightmare – and yet another thing that screams your website was “put together” rather than “designed”.
3. Headers That Scroll Off The Screen
Headers that scroll off the screen are an issue I see far more frequently with static websites than dynamic ones, particularly ones with no Content Management System – and that might reveal something about the level at which design starts to matter, in the move from what are often DIY/hobby sites to proper, professional websites.
Regardless, headers are a fundamental (indeed the main) part of site navigation. When they scroll off the screen, users lose the ability to switch to a different page or return home, etc. If your headers perform other functions, such as a search bar – they can’t do that either. Not without scrolling all the way back up.
You can mitigate this by designing the header to return when the user scrolls up a bit, and then hide when they scroll down again, but I personally find this annoying because a) it looks like the website is doing a bit of “in out, in out, shake it all about” – and often this isn’t the smoothest thing to look at so it can feel like it’s glitchy, and b) it requires me to perform two tasks (scrolling, then clicking) when it could have (and should have) just been one task.
Keep the header stuck to the top of the browser, and keep it thin and non-intrusive for the best user experience, balancing utility with aesthetics.
4. Headers With Many Menu Items
This is something I see on sites where for whatever reason, the designer/developer hasn’t used sub-menus for headers. This is a problematic oversight, likely at two levels.
The obvious one is visual – you get 50 menu options which is overwhelming, visually messy, and awkward to navigate. Your header should contain no more than five buttons, ideally – seven at a maximum, and for some reason odd numbers always look better than even so I’d avoid six entirely.
The unseen reason why this is quite a severe oversight is because a developer that didn’t understand sub-headings likely doesn’t understand site architecture/structure either.
If you are an Architect, let’s say, and you offer three services: Barn Conversions, Listed Buildings, and Commercial Buildings – these are three sub-categories of your “Services”. Your header menu should say “Services” and when you hover, those three options appear in a drop-down menu.
In your site architecture, these pages should be nested inside “Services” for SEO as much as anything. A developer who got the header wrong, probably also got this wrong. So, you want:
Services
-> Barn Conversions
-> Listed Buildings
-> Commercial Buildings
And specifically not:
Services
Barn Conversions
Listed Buildings
Commercial Buildings
The latter site’s structure is wrong and it may harm SEO, and make navigation more awkward for users.
5. Horizontal Header Down The Side of the Screen
Something you occasionally see on more ‘creative’ sites, and which proves that creativity without understanding – being different just for the sake of being different – has limited success. The best of creativity is when it solves something.
Alas, headers at the side of the screen do not. Yes, there are some Linux distros (ahem, Ubuntu) that have this layout, and some people who are more into tech and software increasingly prefer vertical tabs in browsers, too.
The argument (aside from preference) tends to circle around the correct observation that a lot of horizontal space is wasted on a computer, but vertical space is precious. Therefore, having navigation elements stack vertically down one side of the screen makes a better use of space.
And yes, it absolutely does – there is no doubt about that. This is where UX (web designer shorthand for ‘User eXperience’) fights with logic. Most of us have been using websites for decades and are far more used to navigation being along the top of the screen.
From browser tabs, to bookmarks, to website headers – this has been the standard for some people’s entire lives. Bucking that trend takes getting used to, but most people aren’t used to it.
It may also haunt you down the line, especially if you end up adding something like a blog to your site, because blog pages are commonly built in three columns: Navigation, Content, and Sidebar. This is likely to be very overcrowded if your website header is now sitting in the space where the blog Navigation column is supposed to be.
Unless your audience is people who explicitly prefer vertical navigation (going back to the point from above about serving your target audience), you shouldn’t interrupt people’s natural flow – and for most people it’s not natural to use a website this way.
Friction is not experienced often as novelty, but frustration or confusion. The best design follows a blunt rule: don’t make me think.
A frustrated visitor leaves.
6. BONUS: Burger Menu on Desktop Websites
Flat out: don’t do this, ever. Please! Burger menus on desktop are the worst of two worlds.
Firstly, it necessarily means the header menu is vertical, violating the previous point (Section 5). And secondly, it causes the same irritation I mentioned in Section 3, where I said about menus that vanish requiring me to take two steps to navigate the site when it should just be one.
Worse, Burger Menus on desktop websites strongly suggest (aside from lack of expertise in web design) the website was designed without the desktop in mind, for mobile users first. Sometimes it is a tell of a cheap template build too, because like with most things in life – you get what you pay for; pay peanuts, get monkeys.
It’s a fundamental failure to understand how websites are used in real life, and I’d say it goes as far as alienating a sizeable amount of your web traffic.
You might want to use my “serve your target audience” point against me here, and defend this along the lines that several sites that do this are intended to be mobile-first, but in this case I don’t think that’s a fair response because you can (and should) design headers to be full-width on desktop while being a burger menu on mobile.
Good design should also ensure there are as many winners as possible, and burger menus on desktop websites isn’t how you do it.
7. EXTRA BONUS: Social Media Icons
You’ll think I’m a hypocrite for this one too but it’s not a hard-and-fast rule. I’m raising this as a bonus just to get you to think about it.
There are good reasons to put your social media links in the header. Some that come to mind are:
- Trust signals
- Alternative contact options (perhaps even preferred)
- Grow your audience on other platforms
But there is also a downside – it encourages users to leave your website (something you own and control) in favour of going to a platform that you don’t own, and don’t control. It’s fine to grow a following somewhere like Instagram but if you ever get banned, you lose everything. You can’t get banned from your own website.
There are other disadvantages to social media:
- Less relevance – they see your most recent posts, not your most relevant ones. On a website, you can control the journey. On social media you normally can’t.
- Distraction – social media is designed to be distracting and addictive. There’s a far greater risk that the visitor gets distracted by a DM or a silly reel and forgets what they were doing with you.
Putting social media icons in the header of your site should be a calculated choice. It’s not inconsequential.
If you’re just doing it for social proof, perhaps try putting them in the Footer instead. It’s already where people look for important stuff, such as Privacy Policies and Terms of Service, and contact details.
If you’re putting social media icons in your header to serve as a contact alternative, try instead putting them on your Contact page, because by then guests are already deciding to contact you about something so it serves their intent rather than distracting them. The difference between “oooh, I’ll see what’s on your Instagram” and “I’ll reach out on Instagram” may be the difference between not hearing from the visitor, and hearing from them.
If you want to make a social channel your main contact, then make a contact button for it and put that in the header, rather than the social icons. E.G. If you’re a trade and want people to WhatsApp you, make another button called something like “WhatsApp” automatically open it. Do keep the original/proper contact page too though, because some people prefer other methods like e-mail.
Whatever you do, make sure it’s a decision you think through – not just copying other websites who may not be trying to do what you’re trying to do. It might be conventional to put social icons in the header, but it’s not required, and sometimes it doesn’t help you – it just helps people to leave your site.
Conclusion:
A header, like a book cover, may be both the first and the last thing someone interacts with on your website. A good designer has thought about this, not for the sake of pedantry but because they understand precisely how websites are actually used, and know that you have to get the basics right.
If your website has committed one of these Seven Deadly Sins, don’t panic! I happen to be a web designer myself and I know a thing or two about headers. Reach out! I’d love to be able to help.
May good health be yours.
Jack,
True North Web Design.