Sunday, January 20, 2013
Fixed Navigation Bar in CSS & HTML
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 class="title"><a href="#">TheCodePress<span class="subtitle">.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.
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. Don't forget to comment about it, also download source files and watch live demo of it.
Get tutorials directly to your inbox subscribe the blog!
Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:
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.
<div id="nav">
<p class="title"><a href="#">TheCodePress<span class="subtitle">.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;
}
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. Don't forget to comment about it, also download source files and watch live demo of it.
Get tutorials directly to your inbox subscribe the blog!
Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:
Subscribe to:
Post Comments (Atom)
Nice post , it really helpful.
ReplyDeletescsscs
Deletegreat tutorial, continue the good work!
ReplyDeleteColl Man. That was helpfull. Keep it up
ReplyDeleteAwesome bro! just 1 suggestion, please make your site look proper and for codes use blockquote style. Anyway thanks for it..
ReplyDeleteAkshat
:) Ok, i'll also look to improve the UI of the site!
Deletei want a nav bar like this www.windows.com
ReplyDeleteIt's simple you'll just need to do few changes in the code :)
DeleteI want a nav bar like this www.windows.com
ReplyDeleteIt's simple you'll just need to do few changes in the code :)
DeleteReally Awesome Blog...
ReplyDeleteThanks :)
Deletethanks a lot man this is helpful !!
ReplyDelete:)
DeleteI Like Most Your Css Codes I Stand & Clap For You (h)
ReplyDelete:) thanks :)
Deletehm..good idea :) thinking of adding a new tutorial about the title you gave :)
ReplyDeletehm..good idea :) thinking of adding a new tutorial about the title you gave :)
ReplyDeleteI added white-space:nowrap so that the text doesn't wrap on browser resize.
ReplyDeleteBut now when browser is resized smaller than the UL, the out-of-screen LIs are inaccessible. And when testing on smaller screens, most of the nav menu is inaccessible (out of screen).
Any way to fix this?
Try by floating all the link:
DeleteExample :
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
float:left;
}
Hope this works :)
I would also like a way to resize the text when the browser is resized. Is that possible?
ReplyDeleteI have never tried it, but i think so you'll need to specify the font-size in percentage.
DeleteI have never tried it, but i think so you'll need to specify the font-size in percentage.
ReplyDeleteCan we make the navigation bar to be at the bottom of the page instead of the top?
ReplyDeleteYup..you can do it, just use bottom: 0px; instead of top:0px; in #nav
DeleteThank you it's great!
ReplyDelete:)
DeleteSorry, how can I put the menu items on the bottom of #nav instead of having them in the middle?
ReplyDeleteThanks!
This comment has been removed by the author.
DeleteHi,
ReplyDeleteVery good navbar :) But, I have a problem ... I try to use it with phpbb, but when I scroll the text and some pictures, we can look it through the navbar. Like it is transparent ... Since 3 hours, I can't fix it :/
Do you have any idea for this issue ?
Add this is your CSS stylesheet.
Delete#nav {
z-index: 999;
}
thanks
ReplyDeleteIts a great and lovely nav bar, thanks for sharing !!
ReplyDeleteWOW! Awesome. I'm just getting into web development and have been testing out different methods of creating sticky footers....this one worked! Thanks!
ReplyDelete