How to create sticky header bar for a website

header sticky
Arsh Kapoor picture Arsh Kapoor · Nov 3, 2012 · Viewed 53.6k times · Source

I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.

Answer

MichalHlavacek picture MichalHlavacek · Nov 3, 2012

In your CSS, add

position: fixed;

to your header element. It's just that simple, really. And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.

Related questions

Sticky Header after scrolling down

I saw this sticky header on this website: http://dunked.com/ (no longer active, view archived site) When you scroll down the sticky header comes down from the top. I looked at the code, but it looks really complicated. I …

Read More
How can I make sticky headers in RecyclerView? (Without external lib)

I want to fix my header views in the top of the screen like in the image below and without using external libraries. In my case, I don't want to do it alphabetically. I have two different types of views (…

Read More
CSS Sticky Header/Footer and Fully Stretched Middle Area?

With CSS, how can i simply get a page with sticky header and footer which are appearing forever, whenever the page is scrolling or not. I found some sample online, but what i additional want is, the middle content area …

Read More