A Full-Width Centered Navigation Bar

Published December 17, 2009 by CSS Newbies.

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.

Sketch of a centered full-width navigation bar.

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.

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

#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!



55 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>