How to Create a Navigation Bar in CSS

What better way to finish up your website header than with a navigation bar! If you’d rather not create the nav bar with an image editor, CSS can help you do the job pretty quickly. Simply follow along or copy the code from this page into your HTML code and you should be good to go.

If you need help creating a banner, review the tutorial on How to Create a Free Website Header in Photoshop for some ideas.

You can customize everything from the size of each tab to the color of your text. So, if you don’t like a particular feature or color, have some fun and change it up.

This tutorial is specific to a horizontal navigation bar.

Instructions:

Step 1. Start any text or web editor like Notepad or even Dreamweaver. If you’re using Dreamweaver, switch to code mode so you can manipulate the code.

I prefer creating the code for my navigation within a CSS file and then linking to it from my HTML file. That allows me to modify the code in a single location rather than in multiple places if changes are needed.

You can start with a brand-new file or open an existing CSS file for your web page.

Step 2. We’ll first style the body of our web page and specify the font for our page, which includes the navigation bar. Setting the margin and padding to zero removes the padding and margins.

body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}

Step 3. Now, let’s create the container for the navigation.

We’ll name the CSS selector for the container, navContainer and call it into use later.

The background is set to a mid-toned blue (#3399CC) and the width to 800 pixels. This is the same width we used for the banner in the header tutorial if you’re following along. Again, you can change this width to whatever you want.

#navContainer {
background:#3399CC;
width:800px;
}

Step 4. Let’s customize the look of the tabs within the navigation bar, starting with the bullets.

The UL tag in HTML defines unordered bulleted lists (used for bullets rather than numbers), while the LI tag defines each line item within the tag. In our HTML file, we’ll use each LI to hold each group of text within the navigation bar, such as “Home,” “About Us” and so forth.

First, we’ll remove the bullets that are automatically inserted when we use the UL tag. We’ll do that by setting the list-style property to none for navContainer. The padding and margins are also set to zero here to move the content against the margin.

#navContainer ul {
list-style:none;
padding:0;
margin:0;
}

Step 5. We’ll set the UL tag to display all text links (anchor tags) within it as a block with display: block but float the text towards the left side of its container.

While we’re at it, let’s set the left and right padding to 20 pixels for the block, and the top and bottom padding to zero.

The background color for the container is set to a light-gray and the text to black to keep the text from changing to the default “blue” for hyperlinks. In addition, we’ll remove the underline from the hyperlink and change the text to display in uppercase.

Lastly, a mid-toned blue border will display on the right of each block.

#navContainer ul a {
display:block;
float:left;
padding:0 20px;
background:#EEEEEE;
color: #000000;
text-decoration:none;
text-transform:uppercase;
border-right: 2px solid #3399CC;
}

Step 6: Let’s customize how the navigation tabs display when you roll over a tab. We’ve set the background color to dark-gray and the text to white.

#navContainer ul a:hover {
background:#999999;
color:#FFFFFF;
}

Step 7. An important thing to note about LI tags is that they automatically display each line of text on a separate line. So, we’ll need to customize the LI tag for #navContainer to display as inline text as follows:

#navContainer li {
display:inline;
}

Here’s the entire code for the CSS navigation bar:

Step 8. Save the file as a CSS file by clicking “File” and “Save” and changing the file type to CSS.

I usually place my CSS file in a separate folder, such as “style” directly within the folder for my HTML files. So, when calling it later in the HTML file, it may read as style/navigation.css, for example.

Step 9. Open the HTML file where the navigation bar will go and add the following code in an empty spot within the HEAD tag:

<link type=”text/css” rel=”stylesheet” href=”style/navigation.css” />

Your code should look similar to this. Again, you’ll just need to change the folder/file names to match your CSS file’s name and location.

Step 10. Find where you want the navigation bar to display, preferably above or below the banner within the BODY tag. Then add your code to complete the navigation bar.

Be sure to reference the CSS selector (navContainer) you created in the CSS file like this and add/remove links to suit your need:

<div id=”navContainer”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”aboutus.html”>About Us</a></li>
<li><a href=”services.html”>Our Services</a></li>
<li><a href=”directions.html”>Map & Directions</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

Here’s a sample of the finished navigation bar. Just change the colors to your taste.