Facebook Style Fixed Header in CSS

If you take a look on the header of the Facebook, you will see a fixed header which remains always at the same position even on page scroll. This is a nice idea to implement a header menu. You can also see the same header in the Google plus.

Fixed Header

There are many tutorials are available on this but all use jQuery to make the fixed header. But in this tutorial i will show you with pure css.

see the HTML code: Here header is the header part which we want to fix, and the conent part is the rest of the page

CSS: We use position property of CSS with the value fixed to.

See the full page code of a simple demo

 

advertisement

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

  • ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!