Sticky Headers- Challenges, Considerations and How to create one?

Among the many trends in web designing in recent times, you must have noticed that one very important one is having a header which does not disappear when you scroll down. Navigation is very important in a website (there are people who still believe in the three click rule) and a fixed header helps in the same.  UX experts have debated whether sticky headers at the top of the page, which are always visible to the user, are the thing to go with, but the end users usually prefer such headers.

What is a sticky header?

A fixed or sticky header is a horizontal menu which stays fixed at its place even when the user scrolls down. Therefore, if you need to access some item on the header, you don’t need to scroll right to the top as it’s visible to you at any position on the page.

Courtesy- Smashing Magazine

Creating a sticky header

Let us create a fixed header. The markup for the same is as follows.

<div id=”header”>

<div class=”header-item”>

My awesome logo

</div>

<div class=”header-item”>

Header Item #1

</div>

<div class=”header-item”>

Header Item #2

</div>

<div class=”header-item”>

Header Item #3

</div>

<div class=”header-item”>

Header Item #4

</div>

<div style=”clear:both;”>

</div>

</div>

<div id=”container”>

<!– Text in the body of the document –>

</div>

Normally, the styles for the elements shown here would be something like this.

#header {

background-color: #cecece;

height: 45px;

line-height: 45px;

width: 100%;

}

.header-item {

padding: 0 0 0 20px;

float: left;

text-transform: uppercase;

cursor: pointer;

text-align: center;

}

.header-item:hover {

text-decoration: underline;

background-color: #b2b2b2;

}

#container {

width: 1000px;

margin: 0px auto;

}

In such a state, the header disappears when you scroll down. However, to keep the header even when you scroll down, we add two attributes- a position and a top.

#header {

background-color: #cecece;

height: 45px;

line-height: 45px;

width: 100%;

position: fixed;

top: 0;

z-index: 10; /* optional */

}

The fixed position holds it in place when you scroll down, whereas the top: 0 signifies that it’s displayed 0 pixels from the top of the container (which in our case is the body). A z-index specifies the vertical position of the element relative to the rest.

You can check the code on GitHub and a working demo here.

Bonus- jQuery alternative

If you already use jQuery in your project and you don’t mind adding a few more lines of code, you can try this demo by Web Tutorials Plus. The difference in this demo is that the header is allowed to disappear for a small amount of time, and the JavaScript notices this and adds certain CSS properties to the header to make it stick to the top again! An explanation of the plugin and code used is available on their site.

Do people like it?

A usability study published by Smashing Magazine reveals that sticky headers are not only quicker to navigate, but preferred by users as well! Interestingly, everyone preferred the sticky user menus but could not come up with a reason for their preference! The navigation turned out to be 22% faster when using sticky headers.

Conclusion

There are a number of websites which have adopted the sticky header model (Facebook for instance), but there remain another bunch which prefer not to change. As such, sticky headers are easy to implement but restrict the creativity of your designers because they are forced to stick with a horizontal menu positioned at the top of the page. If you decide to go ahead with it, the challenge is that it needs to blend in with your website and avoid any distraction to your users. However, if you do it right, it can serve as a tool for better navigation. The choice is yours.

Speak Your Mind

*