The Foundation of a Navigation Bar

With strong reasoning behind every line of code in our stylesheets we can make them cleaner, easier to maintain and more universally compatible. Yes, some style types will always need to be bug fixed in different browsers but unordered list navigation isn’t really one of those things.

I’ve seen navigation bars styled a thousand different ways with an unordered list. I’ve also had people come to me with a thousand different problems they’re having because the “navigation bar looks like crap in this browser and good in that one”. Most of the time those problems can be fixed by sprinkling some of the special salt on them that I describe below.

These are a few guidelines I try and stick to when building out a navigation bar. I’m not saying this is the only way but yes, I am saying this is the only way.

Before you do anything you always want to make sure you’re using some sort of CSS Reset to reduce browser inconsistencies (since everyone (browsers) renders CSS how they feel like it). Until all the browsers come together, go on a few dates, fall in love and eventually universalize their default stylesheets you need to use a reset

The HTML

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Nothing new here. Just your basic unordered list.

The basic CSS

Okay, so here’s the code. I’m going to paste it in full and then describe the reasoning behind it.

nav ul {
    list-style: none;
    width: 100%;
}
nav ul, nav li { float: left; }
nav li { display: inline; }
nav li a { display: inline-block; }

Explanation

1. The UL – The container for everything. The list-style: none; makes sure your LI has no bullets and the width is really only needed if you’re going to want to have a background color or image behind your navigation.
2. Float the UL and LI left – This gets rid of the annoying little space that you can’t get rid of to the left of your list items.
3. LI – We display this inline to, well, make it a horizontal navigation bar.
4. LI A – This part is important. You shouldn’t ever really need to style your LI more than just giving it display: inline; – Any padding, coloring or icons really belong to the actual link itself. display: inline-block makes sure you can do this without ever straying outside of the list item itself.

Okay, so that’s the foundation but how do we go about giving it a little flare?

The sexy-fied CSS

nav ul {
    background: #2C1720;
    list-style: none;
    width: 100%;
}

This is exactly the same as above except I added a background color to the UL. Giving you the bar, in navigation bar.

Now we need to make those pretty links. So, naturally, we style the links. Not the list item.

nav li a {
    background: #D77F67;
    border-right: 1px solid #964043;
    color: #DFEAE4;
    display: inline-block;
    padding: 10px;
    text-decoration: none;
}

I added lots of stuff here.

1. Background Color – To make the links a little more distinguishable.
2. Color – Because we all know everyone hates default blue.
3. Border-right – Adds a little separation to the links (not really needed)
4. Padding – A bigger button is a more usable button. Even if there is no background color, give it a little padding.
5. Text-decoration - Nothing fancy here, I just don’t like my navigation links to be underlined.

And then, of course, we need a hover effect.

nav li a:hover { color: #2C1720; background: #FCC769; }

The moral of the story

That’s really all there is to it. Use this and you shouldn’t really ever run into any problems. Do what you want with this but always remember the moral of the story:

The main reason for navigation is the links. Style the links, not the list-items.