How to create sticky header using css

This article helps you to create sticky header using css and php. Now a days sticky headers are very useful and most of the people are using their websites. Because this is user friendly navigation, user easy handle the navigation when user scroll the page also.

This will be easy to create using css and html. the below diagram shows how the fixed or sticky navigation or header looks. Here i am not provide any responsive menu or any responsive layout. This post shows how to create fixed the header in webpages.

css for fixed header :

body
{

background-color: rgba(103, 58, 183, 0.08);
}
.fixed-header {
background-color: #673AB7;
width:100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 10px;
text-align:left;
color: #fff;
}

.fixed-header a
{
letter-spacing:3px;
color: #fff;
font-weight:bold;
text-decoration:none;

}
.content{
height:1000px;
padding:60px 0px 0px 50px;
}
.content p{
height:150px;
}

Html code for Sticky(fixed) header:

<div class="fixed-header"><a href="">Home</a> &nbsp;|&nbsp; <a href="">About</a> &nbsp;|&nbsp;<a href="">About1</a> &nbsp;|&nbsp;<a href="">About3</a> &nbsp;|&nbsp;  <a href="">Service</a> &nbsp;|&nbsp; <a href="">Service2</a> &nbsp;|&nbsp;  <a href="">Gallery</a> &nbsp;|&nbsp;<a href="">Contact</a> </div>
<div class="content">
<p>sample text1 for  fixed header</p>
<p>sample text1 for  fixed header</p>
<p>sample text1 for  fixed header</p>
<p>sample text1 for  fixed header</p>
<p>sample text1 for  fixed header</p>
</div>