A Full-Width Centered Navigation Bar

Published December 17, 2009 by saurav.roy.

Centered Navigation Bar - Click to see it in action!

Right around the time I was developing the code for the Super Simple Navigation Bar I wrote about a while back, a friend came to me with an interesting problem. He needed a horizontal navigation bar like the one I was creating, with the following changes:

  1. The navigation bar background should stretch the full width of the screen (not just the width of the centered content area), but
  2. The navigation elements themselves should still be centered over the content area.

The sketch below outlines the basic design concept. Read On…

Share and Enjoy !

0 0