I occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to explain how to build a basic, no-frills horizontal navigation bar. And in more cases than not, a simple navigation bar is exactly what the doctor ordered.
So today’s tutorial is all about going back to basics. This is what you need to know to build a simple navigation bar like the one pictured above (and you can see a working example here).
The List
As with most modern navigation bars, ours will be based on the unordered list (<ul>) tag. This makes semantic sense, a navigation bar is really nothing but a list of links leading into your site. The traditional horizontal orientation is simply a convenient means to get all of our most important list items “above the fold,” so the user can see them without having to scroll down the page.
So here is our sample HTML:
<ul id="nav"> <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>
That’s really all it takes! You’ll notice I did use one ID, so we could tell our navigation bar apart from all the other unordered lists on the page. But if this were tucked into a div with its own ID (like a “banner” or “header” div), the ID probably wouldn’t be necessary. And yes, I could add even more IDs and classes if I wanted to make this fancier, but we’re all about simplicity today.
Making It Horizontal
By default, our list is vertical. So let’s make it horizontal:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none; }
#nav li {
float: left; }Here we’re floating both our list and our list items left. Floating the list items left is what pulls them into a nice horizontal row for us, stacking the items from left to right. However, because of how floats behave, our containing list will collapse to a height of zero unless it is also floated left.
And that wouldn’t be a major problem, except I’m planning to give my list a background color later that I want to show up behind my list items, and if my list collapses, that won’t happen. That’s also why I’m giving my list a width of 100%: That way, it’ll fill up the entire width of the page (or of its container, if it’s in a container with a width set).
I’m also removing most of the margins and padding to make the list behave itself (I’m leaving some margin on the bottom, simply for aesthetic purposes), and setting the list-style to “none,” which removes the bullets from my list.
At this point, our navigation bar looks something like this:
Certainly nothing stylish (and probably difficult to use, to boot), but believe it or not, most of our heavy lifting is now done! From this basic framework, you could construct any number of unique navigation bars. But let’s style ours a bit.
First, we’ll give our navigation bar a background and some borders by updating our #nav CSS to this:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }And let’s give our anchor tags a bit of breathing room and style, too:
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }Here, I’m giving the anchors a display of “block” to make sure they fill up the entire list item and make the whole area clickable. Then I’m adding some padding to space them out a bit. I’m also removing the underline, making the font bold, setting our color to a nice blue, and adding a border to the right-hand side of the item, which matches the border we added to the top and bottom of our unordered list.
And finally, let’s give the navigation items a different color when our users mouse over:
#nav li a:hover {
color: #c00;
background-color: #fff; }And just like that, we have a perfectly functional, useable, and useful navigation bar. You can see it in action here. And here’s all the CSS in one location:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#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 a:hover {
color: #c00;
background-color: #fff; }Like I said, this is a useful framework from which to work. 90% of the navigation bars I build start out almost exactly like this. It’s just a matter of styling them in different ways to get the look you’re going for.
On September 05, 2009
9:14AM
Al said:
good article
usually the time I have a problem with the simple horizontal menu is trying to center it on the nav line when you do not know how long the nav menu is. that always seems to be complicated. left or right aligning it is fairly easy.
perhaps you could comment on the centering problem.
Al
p.s. like the site and always enjoy your articles
On September 07, 2009
2:09PM
Danny said:
@ Al: have a look at http://www.cssplay.co.uk/menus/centering.html and
http://www.cssplay.co.uk/menus/centered2.html
Best wishes
On September 12, 2009
9:21PM
Aj said:
thanks for the quick tutorial. very useful for beginners.
On October 16, 2009
9:50AM
Ed said:
Thanks for the great insight. It surely helps when you start from scratch.
Thank you.
On January 12, 2010
12:16PM
Katie said:
Hi! I recently created a horizontal nav bar on my Blogger blog, but for some reason I can’t adjust the height. The nav bar is much taller than I’d like it to be. I inserted a height=25px value but nothing happened. Do you have any suggestions?
On January 12, 2010
12:23PM
Rob Glazebrook said:
Hi Katie,
If the navbar is the one on your blog currently, it looks like the culprit is the padding/margin on your navbar’s li tags. You’ve specified a padding of 20px, which is creating 20px of padding on all four sides of each navigation element, including the top and bottom. You might try something like this instead:
#newnavbar ul li { padding: 5px 20px; }That would give you the same amount of space on the left and right sides, but 1/4 the space on the top and bottom.
On January 12, 2010
12:26PM
Ed said:
@Katie, check the settings for the padding. That could be causing the proble.
On January 12, 2010
12:55PM
Katie said:
Thank you both for your suggestions and quick replies. Rob, I changed the padding values to those that you suggested, but the problem remains. Just for kicks, I experimented by changing the padding to 0px, and the height of the nav bar did not change at all. Could something else be causing the problem?
On January 12, 2010
1:16PM
Rob Glazebrook said:
Katie, it looks like your navigation ul and li both have top and bototm margins that are pushing away the content below the navbar. I’d set the navbar ul to have a margin of zero, and reduce the margin on the top/bottom of your list items. You may not even need margins there, since you’re using padding.
On January 12, 2010
1:32PM
Katie said:
Rob, I reduced all the margins to 0, and the result was that the links got bunched up over on the left. The height did not change.
I don’t want to take up too much of your time with this, but I do appreciate the help.
On January 12, 2010
3:30PM
Ed said:
That could be it too. I do not think having both margin and padding is a wise idea anyways.
On January 12, 2010
4:59PM
Katie said:
Rob, I decided to start from scratch, and I followed your tutorial for a “A Full-Width Centered Navigation Bar.” It looks very nice (thank you for that tutorial!), but I still have some space above and below the nav bar. I did not tinker with the margins or padding! lol
I don’t know where this mystery space is coming from, but I think I can live with it. Thank you for your help!
On January 12, 2010
5:53PM
Danny said:
@Katie: to reduce space above your nav bar, look into and set margin from .widget-content{} to zero
Also to better control spacing in nav bar in generally tend to use line-height, as this centers text vertically automatically :
#newnavbar li a {
border-right:1px solid #CCCCCC;
color:#97B156;
display:block;
font-weight:bold;
line-height:3em;
padding:0 15px;
text-decoration:none;
}
HTH
On January 12, 2010
6:36PM
Katie said:
Hi Danny. Thank you for your suggestion about adjusting the widget content margin. The space above the nav bar disappeared when I set the value to 0.
Thank you all for your help!
Greetings from Argentina,
Katie
On January 13, 2010
1:19PM
Ed said:
@Katie the space you are seeing is probably a padding issue. Make sure it is set to 0.
On January 27, 2010
1:09AM
Mrs P said:
How would i centre all the text ie. # nav li a to sit in the middle of the nav bar? So far i have found this tutorial EXTREMELY helpful and SUPER easy to follow – Thank you!
On January 27, 2010
11:23AM
Ed said:
@MrsP using the center tags in your HTML script should take care of the centering issue for you.