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:
- The navigation bar background should stretch the full width of the screen (not just the width of the centered content area), but
- The navigation elements themselves should still be centered over the content area.
The sketch below outlines the basic design concept.
My friend had found some code elsewhere that did what he wanted, but it required two divs in addition to the navigation list to do its centering magic. He wanted to know if I could do it better.
This tutorial is the result of that challenge.
The HTML
I was able to reduce the number of extra divs required down to one. Sadly, I don’t think it’s possible to do this without at least one extra div — or turning to JavaScript instead of relying entirely on CSS.
1 2 3 4 5 6 7 8 9 | <div id="nav"> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> |
If you’re familiar with the code for the Super Simple Navigation Bar, you’ll see it’s nearly identical, except that I’ve wrapped the ul tag in a div and moved the “nav” ID to that div.
This navigation code should be placed outside of your centered content container to allow us to stretch it the full width of the browser window in our CSS.
All in all, I think this is an acceptable amount of code for a navigation bar.
The CSS
Again, all I did here was take the previous navigation bar CSS and modify it a bit. The results are below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #nav { width: 100%; float: left; margin: 0 0 1em 0; padding: 0; background-color: #f2f2f2; border-bottom: 1px solid #ccc; } #nav ul { list-style: none; width: 800px; margin: 0 auto; padding: 0; } #nav li { float: left; } #nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px solid #ccc; } #nav li:first-child a { border-left: 1px solid #ccc; } #nav li a:hover { color: #c00; background-color: #fff; } |
Our #nav div is stretched to 100% of the browser window and floated left. The “float: left” rule might seem a little strange, because we don’t want anything to wrap around our navbar.
This is a little trick that takes advantage of how floats behave. If a container contains nothing but a floated element, that container will collapse down to a height of zero, because floating an element takes it out of the normal document flow. That is, unless the container is floated as well. Then, suddenly, our container only collapses down to the size of the contained float.
Why is this important? That’s what lets us set a background color and border on our #nav element and have it still appear. If the #nav weren’t floated, it would collapse to a height of zero, rendering our background and border invisible!
Next, we’ve given the “#nav ul” a fixed width and used the auto margin trick to center it. The width here is critical: you want it to be the same width as your centered content area. In this example, that’s 800 pixels.
I’m making use of one pseudo-class to interesting effect here. The “:first-child” pseudo-class applies to any element that is the first child in its parent. In our case, this rule is finding the first “li” in our parent “ul”. We’re then applying a border to the left side of the anchor tag inside. Without it, our first element wouldn’t have a border on the left like the others appear to have. While we could technically do that with a class or ID on the first element, I think this solution is a little more elegant.
The rest of the CSS is identical to that in our simple horizontal navigation bar and is mostly presentational. You can customize the colors, padding, hovers and everything else to make the navigation bar your own.
You can see this code in action here. Hopefully others will find this solution as useful as my friend did!
On December 17, 2009
7:46PM
Paul said:
Looks good, and easy to incorporate.
Could you take it another step and make it stick to the top of the browser window? It’s not something I’ve seen very often but have always liked it and thought it was a good idea because, especially on long pages, you don’t have to scroll back to the top to navigate to a different page.
On December 18, 2009
10:41AM
Rob Glazebrook said:
I like that idea, Paul. I’ll write another article in the near future on how to do that. :)
On December 25, 2009
1:37PM
Michael said:
Very nice. Multi-Level would be nice too ;) I have added it to my linklist :)
On December 27, 2009
7:36AM
SteveB said:
Along with your “#nav li a:hover”, you should add “a:focus” and “a:active” so the effect appears for keyboard navigation.
On January 02, 2010
7:43PM
RobShaver said:
I tried this out and it works in Firefox and Safari but fails in IE 8.0.
The left border doesn’t show and the menu just sticks to the left side of the screen. When it didn’t work as I expected I added a full spectrum of reset CSS at the start. This did remove any margin from the navigator but otherwise the operation was unchanged.
I left the page accessable at this address:
http://shaverassociates.net/a/x.nsf/full-width-centered-navigation-bar
Perhaps I did something wrong.
Thanks for your web site. I’m learning bit by bit.
Happy New Year,
Rob:-]
On January 04, 2010
4:58PM
Tom Hayden said:
I tried this on FF, IE6, IE7 and IE8. It looked the same for me on all three – not centered. Not all the way to the left, but left of center.
Tom
On January 16, 2010
9:00AM
Chris Thomas said:
Firefox seems to understand
li:first-child a
and
li:last-child a
but not IE8 :(
I’m wanting to only have a vertical line in between each element, with nothing on each end.
What to do?
P.S. For those of you wanting to actually center the navigation elements, reduce the “800″ width down to the pixel length of your text.
On April 20, 2010
5:37PM
Trevor Haynes said:
I was wondering if there was a way to get the menu bar to show up centered on the web page, but with no other color stretching to the end?
So in other words, the naviagtion elements would be completely centered and there would be background color but the color wouldn’t stretch all the way to the end of the page.
If anyone knows how to do that that would be great!
Thanks so much.
-Trevor
On July 26, 2010
11:45AM
tony said:
Looks great in FF. In IE8 it is floating to the left and there is an unwanted padding below the navbar (between navbar and main content area).
Is there an updated version of the code or did I do something wrong?
On July 26, 2010
11:46AM
tony said:
Looks great in FF. In IE8 it is floating to the left and there is an unwanted padding below the navbar (between navbar and main content area).
Is there an updated version of the code or did I do something wrong?
——————————————
copy of the code:
——————————————
header here
About Us
Our Products
FAQs
Contact
Login
content here
footer here
On July 26, 2010
11:49AM
tony said:
**sorry for the duplicate entry, wanted to paste the code I’m using**
Looks great in FF. In IE8 it is floating to the left and there is an unwanted padding below the navbar (between navbar and main content area).
Is there an updated version of the code or did I do something wrong?
——————————————
copy of the code:
——————————————
header here
About Us
Our Products
FAQs
Contact
Login
content here
footer here
On August 19, 2010
4:27AM
Michael Paypon said:
Great!Thanks a lot..