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.

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. 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:

35 comments:

  1. Nice post , it really helpful.

    ReplyDelete
  2. great tutorial, continue the good work!

    ReplyDelete
  3. Coll Man. That was helpfull. Keep it up

    ReplyDelete
  4. Awesome bro! just 1 suggestion, please make your site look proper and for codes use blockquote style. Anyway thanks for it..
    Akshat

    ReplyDelete
    Replies
    1. :) Ok, i'll also look to improve the UI of the site!

      Delete
  5. i want a nav bar like this www.windows.com

    ReplyDelete
    Replies
    1. It's simple you'll just need to do few changes in the code :)

      Delete
  6. I want a nav bar like this www.windows.com

    ReplyDelete
    Replies
    1. It's simple you'll just need to do few changes in the code :)

      Delete
  7. thanks a lot man this is helpful !!

    ReplyDelete
  8. I Like Most Your Css Codes I Stand & Clap For You (h)

    ReplyDelete
  9. hm..good idea :) thinking of adding a new tutorial about the title you gave :)

    ReplyDelete
  10. hm..good idea :) thinking of adding a new tutorial about the title you gave :)

    ReplyDelete
  11. I added white-space:nowrap so that the text doesn't wrap on browser resize.

    But 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?

    ReplyDelete
    Replies
    1. Try by floating all the link:
      Example :
      #nav a
      {
      font-family:verdana;
      text-decoration:none;
      color:#EDEDED;
      float:left;
      }
      Hope this works :)

      Delete
  12. I would also like a way to resize the text when the browser is resized. Is that possible?

    ReplyDelete
    Replies
    1. I have never tried it, but i think so you'll need to specify the font-size in percentage.

      Delete
  13. I have never tried it, but i think so you'll need to specify the font-size in percentage.

    ReplyDelete
  14. Can we make the navigation bar to be at the bottom of the page instead of the top?

    ReplyDelete
    Replies
    1. Yup..you can do it, just use bottom: 0px; instead of top:0px; in #nav

      Delete
  15. Sorry, how can I put the menu items on the bottom of #nav instead of having them in the middle?
    Thanks!

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  16. Hi,

    Very 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 ?

    ReplyDelete
    Replies
    1. Add this is your CSS stylesheet.
      #nav {
      z-index: 999;
      }

      Delete
  17. Its a great and lovely nav bar, thanks for sharing !!

    ReplyDelete
  18. WOW! Awesome. I'm just getting into web development and have been testing out different methods of creating sticky footers....this one worked! Thanks!

    ReplyDelete

Your Comment Will Be Visible After Approval, Thanks !