Sep 242013
33 Flares 33 Flares ×

Today I will explain How to create a Simple Collapsing  Header Using CSS with an Example.

Here is the demo  Collapsing Header CSS

Now a days most of the webpages are contains Header and  Banner.

So First We will divide page into three parts like Header,Banner and Content.

Here is the sample HTML




You might be thinking what is this header tag, The header tag is new in HTML5. It supports almost all browsers. Here is the quick round of introduction to header Tag.

  • The <header> tag represents a header for a document or section
  • The <header> element should be used as a container for introductory content or set of navigational links.
  • You can have multiple <header> elements in one document.

The following CSS code will apply to Header Element


Height I given as 100px and positions as fixed to prevent the scrolling.The important thing here is Z-Index of header it should have higher index

  • Height I given as 100px
  • Positions as fixed to prevent the scrolling.
  • The important thing here is Z-Index of header should have higher index.this will ensure the rest of the page that does flows underneath  the header. So I gave some maximum value as 10.

And Next thing is Banner

  • This needs scrolling effect.
  • As I given header height as 100px. It should be fixed relative to header height so I given position as fixed and top 100px.
  • This will ensure banner content to sit directly underneath the header.

And Finally Content

  • We given header as 100px and Banner as 300px so relatively content should start from 400 px from top
  • So I gave position as relative and top as 400px.

Here is the Finale Demo Simple Collapsing Header using CSS

I prefer you to read this awesome book on CSS  CSS3: The Missing Manual

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

And Finally Don’t Forgot to Join Our Reader List.


Author : Arunkumar Gudelli

I am a Simple Guy, Standing Infront of the World, asking you to Follow Me.
Don't miss any posts from Me,Subscribe to the RSS Feed.
You can connect me via @twitter or @facebook or Google+ or e-mail.

Optimization WordPress Plugins & Solutions by W3 EDGE
33 Flares Twitter 0 Facebook 0 Google+ 33 LinkedIn 0 StumbleUpon 0 Reddit 0 33 Flares ×