Making a Sticky or Static Website Header Bar With CSS

By Navid  |   22 Jun, 2018  |   0  |  Published in Coding, Web Development,

In the last couple of years, more and more sites have decided to go with a static website header or sticky header bar.  In fact, this is a trend that I have been seeing a lot lately.  Personally, I like the idea of having the header be present at all times.  Of course, if the menu happens to be in the top header bar, then having a sticky header can certainly add to the navigational ease of the site.

I have also seen folks placing ads within the static header bar.  I am not sure if placing an ad in the static website header would increase CTR (or it would even be allowed by popular ad networks) but it could potentially change the visibility of the important parts of the site.  So, I guess the key here is that having a static header bar is probably a nice design/UI touch however, how much of the screen it permanently takes can make or break the design.

The CSS involved making a static website header is fairly simple.  I have created a sample header below which should stay on top of the screen after scrolling:

NeatCue Newsletter

Great marketing & design articles to help make your efforts a success - delivered right to your mailbox