If you’re not familiar with the term, a sticky header, which is also known as a fixed header, is a navigation bar/header that is ‘stuck’ to the top of the browser window, as a user scrolls down the page.
You’ll find a sticky header on many websites these days. In fact, you may have noticed that my own website has a sticky header, which you can see in action in the screenshot below. Many web designers tend to use them as an easy way to improve the user’s navigation experience, especially as it can be done very simply, with just a little bit of CSS code, or even just a click of a button, if you’re using a theme-based website, or a website builder, like Squarespace.
However, in spite of their popularity, you don’t always need to include a sticky header on your website. In this instalment, I’ll help you decide if it is right for you, by looking at the pros and cons of using one, as well as some recommended usage solutions.
The Pros and Cons
Whilst sticky headers are very popular, there are reasons for and against using one, which you should consider when designing your website, rather than just implementing it without thinking. Let’s take a look at some of those pros and cons now.
The Pros:
#1: They Save Time
Without a sticky header, if a user happened to be on a page of your website which had a lot of content and they decided to switch pages, they would have to scroll all the way back up to the top, to find the navigation bar. A sticky header would always be in view, so they would not have to scroll back to the top, to move to a different page. This would allow them to move around your site much quicker. In fact, according to a Smashing Magazine study, sticky headers are 22% quicker to navigate and for a quick 5-minute visit to a website, could shave up to 36 seconds off that visit.
#2: They Make Navigation More Intuitive
When you have a user visiting your website, you want to make sure they stay for as long as possible. A key way to do that is to make it as easy as possible for them to navigate around your website. If they have to work hard to find the information they want, they’ll go elsewhere and you likely won’t see them again – not what you want to happen. If your navigation bar is always there, in a sticky format, they’ll find it easy to get where they want to go, without having to scroll and will therefore stay longer. That’s especially important on mobile devices, where the content width is much narrower and therefore the pages are by default much longer.
#3: They Help Reinforce your Branding
For any organisation, from the small sole traders and charities to the large global companies, branding is very important. It’s how the public identifies you and what dictates if you stick in their memories. On any website you’ve ever visited, the chances are that you’ve seen the logo inside a navigation bar, whether it is to the left of the menu items, to the right, above or below. That is really important for your branding. However, if the navigation bar disappears when the user scrolls down the page, you’re losing any benefit of having the logo there. That’s why a sticky navigation bar is very useful. No matter where your visitor is on any given page, the navigation bar will always be there and by default, so will your logo. That really does help to reinforce your branding.
The Cons:
#1: They Take Up Space
By virtue of the fact that they are sticking to the top of the screen, whenever your visitors scroll and on any device, they will reduce the amount of space available for the content you have very carefully designed. If the sticky header is poorly designed, such that it does not compress at all when scrolling begins or is just very tall by default, you may find you are causing your visitors to scroll even more than they would have done without it. That’s obviously bad for user friendliness, in the same way as pop-up adverts.
#2: They can Distract Users from your Content
Ultimately, you will have created a website for any number of reasons, from information sharing and service advertising to online gaming and anything in between. Whatever the reason, it’s the content that you want your visitors to pay attention to and not the way the navigation bar behaves. When you make a navigation bar sticky, as you’ve guessed, it’s always there. Therefore, unsurprisingly, it is a permanent distraction for your users, from the content you are trying to get them to focus on. Depending on the type of website, you may find you are better off without a sticky header.
#3: They can Make your Website Load Slower
A standard navigation bar involves very little computational effort, as it is just a static part of your website’s pages, as with all your intended content. Sticky navigation headers involve a small amount of extra code to control the behaviour, from just keeping them fixed to the top of the page, to controlling their height and any animation effects. Designing the sticky header properly can limit the loading delays caused by this extra code but either way, a delay is a delay. It can have an effect on performance and therefore, how long you keep your visitors on your website.
So, is a Sticky Header Necessary?
Well, the answer is, there isn’t a simple answer. We’ve seen the pros and cons of having a sticky header but ultimately, whether you should use one or not largely depends on the type of website that you are creating.
If your website is designed to be particularly informative, with a lot of content, then you may benefit from having a sticky header. This could be the case if, for example, you are creating a health and lifestyle type website, an online magazine, or you are trying to advertise and provide information on your products. In situations such as these, it is important that your visitors know exactly where they are and can easily navigate to where they want to go. Sticky headers are perfect for that. In addition, if you can guarantee that there are a few key features or areas of your website that users will make use of regularly, then you may want to keep them visible and easily reachable with a sticky header, as is the case with the Facebook sticky header below.
On the other hand, if your website is designed to be interactive, such as with games or videos, where users will likely spend lots of time on a particular page and wouldn’t want to be distracted, you’re better off avoiding a sticky header, as you’ll want the viewing window to be as large as possible, with as few distractions as possible. It is still very important to emphasise, however, that these are merely guidelines. The decision as to whether or not to use a sticky header is ultimately down to the specific nature of the website, as well as the preference of the designer/owner.
How will Digital Lychee Help You?
For all my prospective clients, I offer a free one-hour, no obligation consultation, where we will discuss your website, from its purpose to design features. In that consultation, we can go through the pros and cons of sticky headers, in relation to your unique website, before coming to a decision as to whether or not one will be implemented. If you are interested in having a new website built, or a current one upgraded, then you are in the right place. I would love to hear from you. You can get in touch with me here.