site auditing tools
ADVERTISEMENT

Making a Sticky or Static Website Header Bar With CSS

By Navid Jafari  |   Feb 2019  | 0
Affiliate link disclosure: NeatCue receives compensation at no additional cost to you, if you use referral link(s) on this page to make a purchase.
ADVERTISEMENT

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:

See the Pen
Static Header
by NeatCue (@neatcue)
on CodePen.

ADVERTISEMENT


Tags  

Affiliate link disclosure: NeatCue receives compensation at no additional cost to you, if you use referral link(s) on this page to make a purchase.


ADVERTISEMENT


ADVERTISEMENT

Newsletter

Great marketing & design articles to help make your efforts a success. Delivered right to your mailbox