At its simplest, a website navigation bar is nothing more than a list of pages. It makes sense that the markup should reflect that:

<nav>
	<a href="index.html">Home</a>
	<a href="about.html">About Us</a>
	<a href="contact.html">Contact Us</a>
	<a href="products.html">Our Products</a>
	<a href="order.html">Place An Order</a>
	<a href="privacy.html">Your Privacy</a>
</nav>

To comprehend what we are about to do, it is vital to understand the structure of our document. The <nav> tag is a block-display element that is a container for a series of links. If the <nav> tag could be thought of as a parent, the <a> elements could be considered its children.

Each <a> element is displayed inline by default, together with its text content.

In its current state, the navigation bar will appear somewhat cramped. As a first step, let’s change that.

We could write a style for <a> elements, but that would be far too broad a rule, affecting links everywhere on our page. Neither is it effective to write an inline style for each link. Instead, we’ll use the fact that the parent <nav> will usually be unique on the page and use a descendant selector to make our style specific:

nav a {
	padding: .5rem;
}

That rule provides each <a> element with some space around it. Note, however, that the space is applied to the left and right or each link, but not above or below it, due to the fact that they are inline elements. Let’s change that now:

nav a {
	display: inline-block;
	padding: .5rem;
}

This spaces the links out nicely.

If we wanted to have a vertical line divide the links from each other, we don’t add characters or markup: one rule of good web development is to avoid adding extra content or elements, especially when they are only for presentational purposes. Instead, we will use CSS on each <a> element, adding to the style declaration we already have in place:

nav a {
	display: inline-block;
	padding: .5rem;
	border-right: 1px solid #000;
}

The links in our nav bar still look a little plain. We can change their appearance, with the understanding that the more we alter the presentation of links the less likely they are to be recognized as such:

nav a {
	display: inline-block;
	padding: .5rem;
	color: #000;
	text-decoration: none;
	font-family: Avenir, Arial, sans-serif;
}

It is also common to add a hover effect to links in a navigation bar. We will do this by writing a style declaration for a pseudo selector to the links, effectively reversing the colours:

nav a:hover {
	color: #fff;
	background: #000;
}

When we specify :hover for an element we should also specify :focus, as it's possible that users with accessibility needs won't be using a mouse to navigate your document, but a keyboard, which does not have a hover function. So the declaration has a group combinator added to it:

nav a:hover, nav a:focus {
	color: #fff;
	background: #000;
}

At this point, you may notice a very slight movement of the elements below the navigation bar when links are hovered, due to an odd little browser quirk. To get rid of it, add a transparent border to each link:

nav a { border-bottom:solid 1px transparent; }

You may also discover that the highlight background colour that appears when you hover over each link falls just short of the divider line to its right. The cause of this is obscure: it’s not the CSS per se. Rather, it is to do with our HTML.

In my first discussion of HTML I said that spaces and returns don’t matter: that the language ignores anything more than a single space and that returns without markup don’t make any difference. That remains true… except in this case.

Because of the carriage returns after each of our <a> elements, the browser inserts a space at the end of each when they are set to inline-block. It is these spaces that you are seeing outside the highlight area. To get rid of them, we can simply eliminate the returns between our links:

<nav><a href="index.html">Home</a><a href="about.html">About Us</a><a href="contact.html">Contact Us</a><a href="products.html">Our Products</a><a href="order.html">Place An Order</a><a href="privacy.html">Your Privacy</a></nav>

Now we can add a border between the links without worrying about the extra gap. We do so with CSS, rather than adding extra elements. To keep things visually consistent, we don't want a line after the last link, so we'll use a :not pseudo-selector:

nav a:not(:last-child) {
	border-right: 1px solid black;
}

The last <a> element is the last child of its parent – we have simply crafted an exception to the general rule of links having a border to their right.

Finally, if you wanted the navigational bar to be centred as a whole on the page, remember that the <nav> element is a box of its own:

nav {
	text-align: center;
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/XbRdPm