Create a Floating Navigation Bar

October 30, 2011

Floating navigation bars have become very popular on sites like Facebook and Google+.  It is a great way for users to be able to move efficiently around your site.

Create a simple page structure with a header, content area, and footer.

Make sure that the body has no margin, otherwise the navigation bar will look awkward.  Next, style the header div any way you like, then set the width to 100% and the position to fixed.  A height will also need to be set for the next step.

Now, style the content how you please, but be sure to add top padding relative to the size and padding of the navigation bar so that the content is not covered.

Here is what the final product should look like.

Live example.

Download this code.

Similar Posts:

by Phil Fishbein |
5 Comments |
CSS, Front End Development, HTML
  • Anonymous

    Good Tutorial as usual :) Might use this in some of my CSS soon :)

  • http://www.facebook.com/ewidianto Edi Widiyanto

    i will use it  :) thanks

  • Raman

    i tried but when i scroll down my container overlap the navigation bar and hide it. what should i do??

  • http://www.facebook.com/zimmydesign Brook Zimmatore

    It’s not very useful having your code embedded as an image. Otherwise, nice work!

    • http://twitter.com/PhilFishbein Phil Fishbein

      Thanks for your feedback. On most the posts on SiteKiwis, the code is not in images. However, for a few posts, I tried something a bit different.