CSS Fixed Headers

Thanks! Share it with your friends!


This is a small tutorial on how to modify your css headers to allow them to be fixed.

Fixed headers allows you to create a header on the page and then it is fixed in that position on the page, so that as you scroll the header will overlap the content staying in the same place you set.


Bart Koevoet says:

Help me, I made this header and now i cant scroll while there is more

ImageInMotion.com says:

I did this on a page I’m building… header is fixed but I cannot scroll
down the page.

ella nedeella says:

very useful, thank you!

Amir Siddeeq says:

Also, I needed to know how to make the content areas and how to center them
as well. 

Amir Siddeeq says:

I wanted to request a video as I didn’t see specific video for this. I
wanted a tutorial on how to make the link color stay blue after you click
it or have it turn back to blue if the page were to be refreshed. 

wu yan says:

very nice tutorial…

thx and god bless you and the world..

God bless you and the world..


Pagyutioper Pagyu says:

thank you amazing tutorial

Yell Monreal says:

how shall i do it? if my header’s an image?

Arnold Casiano says:

how can i apply it to cms like joomla

Jean Qu says:

Got it/

Anudeep Lotey says:

Great Video! Can you please explain how you made the black and white
template? I can’t figure it out. 

Jean Qu says:

Code pls ? No …(I dont know how to say this) copy things

Games says:

Dammit I was thinking about making an HTML/CSS cartoony video tutorials!
This guy beat me to it! Oh well, if anyone needs any help with CSS and
HTML, send me your code or ask me I can help too! I like to help!

hector villasano says:

your awesome 

Graeme Duncan says:

Thank you so much! This isn’t what I was wanting to do but showing how to
put another header container div around it and setting the width and margin
on that to center has saved me many hours of frustration haha! Thanks again

Alvaro Grados says:


WishesNetwork says:

Thanks for the help. Had some troubles with fixed headers, not anymore.

Diego Rosales says:

wow i’ve been looking for this all day! thanks!

Nikhil Ranka says:



my header and footer is fixed but i can’t get my content to scroll, i need
help quick

Afrian Hanafi says:

how about, floating menu after scroll ?

hodsony luo says:

Thanks a lot it is very usefully Y(^_^)Y

Steve Tucker says:


solfinker says:

To the point, concise…
and it works!
I definitely follow this guy.


Please contact me. I have something i’ve been working on,SXSW wants me to
pitch. It could be BIG,and could use your help.

Markess A. Wilder says:

I’m sure it’s me, but when I move the maincontent margin down to show below
the header the header moves as well. The header only moves up to the top if
I set the maincontent to “0” Not sure what’s going on and I would also like
to know how to do it with a header and footer fixed… Thanks.

dasten123 says:

Why did you define classes and not IDs? Don’t you use these elements only

d4rkmag3rz says:

Ok there’s kind of a problem here, when you resize the browser and scroll
from left to right, the content within the menu bar goes along with it? so
it doesn’t slide along normally with the page help?

Rogie McDodgeball says:

My only problem is that when i do this, the header is fixed just like it
should be, but it goes behind the content of my page and the contend gets
pushed up a little bit. Could you help me out please?

Helping Develop says:

Thanks man, make sure you share my channel around the profesional videos I
produce, I think I deserve more views and likes 😀 🙂 thanks it helps a
lot!! 🙂

ff says:

Great Video. I tried to do it before but it didn’t work. I saw other
examples on the internet and I found them to be little complicated, but
this one was easy to follow..Thank You

Comments are disabled for this post.