If you want to make a navigation bar which will always be on the top of the page, in this tutorial you are going to learn how to do it. Here we will use basic HTML and CSS (Cascading Style Sheet) for it.
Before starting to create it let me tell you a good news and a bad news.
Good News : Fixed Navigation Bar in CSS & HTML supports all major browsers (including IE7 and higher)
Bad News : IE7 and lower doesn’t support the Shadow Effect which we are gonna use to make it look good. See the live demo of the navigation bar in IE then you will get to know what’s the problem.
If you want the shadow effect then you need to create an image with the effect and set it as background image of your “Navigation Bar” a.k.a “DIV”.
Now we are ready to develop it.
HTML Code for menu : Add this code inside body.
<div id=”nav”>
<p><a href=”#”>TheCodePress<span>.blogspot.com</span></a></p>
<ul id=”navigation”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>My Blog</a></li>
<li><a href=”#”>Tutorials</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>About</a></li>
</ul>
</div>
CSS Code for HTML body : The body margin should be 0px.
body
{
margin:0px;
}
After making your HTML > Body margin to 0px you will not see a big difference. Now let’s design our Navigation bar which Div ID is “nav”.
CSS Code for “nav” : 
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}
Now i’m going to design the title of the page, if you want to design same is i designed you can use the code or you can design as you want.
CSS Code for class “title” and “subtitle” : 
.title
{
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.subtitle
{
color:#EDEDED;
font-family:verdana;
font-size:15px;
}
Now we are going to design the links of our navigation menu.
CSS Code for ID “Navigation”, li, and Links :
#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover
{
color:#BDBDBD;
}
ok here you are done with navigation bar, i’ll also add some content.
HTML Code for content : 
<div id=”body”>
<!–Add your content HERE–>
</div>
After adding content in a div which ID is “body” you will see a problem, some of the content which’s on the top is unable to see because navigation bar is overlaying it. To make it proper you will need the margin-top of your content to be around 80px or more than that. In this post i’m using 80px.
CSS Code for “body” : 
#body
{
width:850px;
margin:0px auto;
margin-top:80px;
font-family:verdana;
}
Now you are completely done with the Fixed Navigation Bar.