A Simple Collapsing Header Using CSS

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Collapsing Header using CSS</title>
</head>
<body>
<div id="container">
	<header>
		<h1>Header</h1>
	</header>

	<div id="banner">
		<h2>Banner</h2>
	</div>

	<div id="content">
		<p>Content</p>
	</div>

</div>

</body>
</html>

 

CollapsingHeaderUsingCSS

CollapsingHeaderUsingCSS

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

header {
	height: 100px;
	background: #99FF66;
	position: fixed;
	width: 100%;
	z-index: 10;
}

 

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

#banner {
	width: 100%;
	height: 300px;
	position: fixed;
	top: 100px;
	background: #FFFF66;
}
  • 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

#content {
	width: 100%;
	position: relative;
	top: 400px;
	background: #FFFFCC;
	height: 1500px; /* Demo purposes */
}
  • 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