Social Widget

Responsive Ads Here

Thursday, December 5, 2019

Sticky header using HTML and CSS

Image result for html gif"

While creating my blog, I wanted it to have a sticky header at the top so that the readers will always be aware of the blog’s name. I had the simple idea of displaying the blog name and logo side by side at the header. I tried many things such as “float”, “display-inline” etc and couldn’t succeed.

Sticky header

The sticky header will fix the header in the top portion of your webpage when a user scrolls the page. It will allow quick access to the menu from any part of the page.

This can be achieved with simple HTML and CSS. If you need some cool animation effects then JavaScript can also be used.

sticky header

Pros and cons of a sticky header

So, there was an interesting discussion on an online forum on whether sticky headers improve the user experience or not. And here are the most common arguments for the use of sticky header:


  • Time-saving

You have probably experienced this before — scrolling endlessly to go back to the menu bar on the very top after realizing that you were browsing the wrong page. With a sticky header, however, users are able to jump to different sections easily as the menu bar always appears on the screen.

  • Good navigation
So, it is the fastest and the most useful way to access to the right information for the end-users. That should make a sticky header good for user navigation. For example, a study showed that they are 22% faster to navigate and many participants preferred a website with fixed headers without knowing the exact reason. This particularly comes in handy on a mobile interface where text tends to be longer.

  • Branding effect
Here’s another minor advantage to add — it also helps you build your brand as your brand logo/name will always be there on the page next to the header.


  • Waste of space
But here’s a catch — sticky header tends to eat up some valuable space as it is fixed permanently on the screen. Imagine you already have a beautiful and functioning website, adding a fixed header may seem excessive. It not only reduces the space for text but also cuts off background imagery.

  • Distracting
Also if implemented badly or incorrectly, it could even disrupt how the page is presented. Sticky navigation ‘does not always render effectively on mobile and tablet devices’. Those who are against sticky headers often argue that users visit the website for content, not navigation. Some users may find it disruptive to the ‘natural flow’ of the web page, while others prefer it for navigation reason (and this is when user testing comes in useful).


I came up with the solution of using tables for this purpose. This way the contents will be side by side and the height of the table row will also, be adjusted according to the height of the largest element in the row.


The CSS part looks like this. 

Finally, the sticky header of my blog looks like this.

sticky header

No comments:

Post a Comment