How to Make a Professional Navigations Bar With CSS

by Foye Robinson

Cascading Style Sheets (CSS) manipulate the style and design of a Web site. A Web page's navigation bar is built using UL and LI tags, HTML tags that are used to create lists on the Web. Although Web browsers render such tags as bulleted lists by default, you can override the formatting using CSS to give your site a professional finish. With a little customization, you can also blend your navigation with the rest of your page.

1

Open a text editor, such as Notepad, EditPad or TextPad. Click "File" and "New" to create a new CSS document.

2

Insert the following CSS code into you page. It sets the top and bottom margins to zero on your Web page:

body { margin: 0; padding: 0; }

3

Insert the following code below the previous line of code. It creates a style for the navigation bar, covering the full width of its parent container or section. It also left-aligns the bar (as far left as possible of its container) and gives it a black background. To change the background color for the navigation, change "black" to a different color, but leave the semicolon intact.

nav {

width: 100%; float: left; background: black; }

4

Add the following code below the previous line of code. It removes bullets from the UL tag and removes margins and padding:

nav ul {

margin: 0; padding: 0; list-style-type: none; }

5

Add the following CSS code below the previous code. It makes the contents within the navigation display on the same line:

nav li {

display:inline; }

6

Add the following code below the previous lines of code. It formats the links within the navigation and displays them as tabs. It adds a vertical padding of 2 pixels and horizontal padding of 15 pixels to each link. It removes underlines from the links, makes the text white and applies a black background. It also adds a thin, white border to the right of each link. To customize the navigation bar, change the colors within the code.

nav ul a {

display:block; float:left; padding: 2px 15px; text-decoration:none; background:black; color:white; border-right: 1px solid white; }

7

Add the following line of code to change the background color of the tabs when you select them:

nav ul a:hover {

background:blue; }

8

Click "File" and "Save" from the menu. Name the file "nav.css" in the "Save As" dialog box. Place the file in the same folder as the HTML file where the navigation bar will go. Click "Save."

9

Use Notepad or a similar text editor to open the HTML file where the navigation bar will be placed.

10

Scroll to the "head" section, located at the top of your page, just below the "<HTML>" code. To identify the correct section, click between "<HEAD>" and "</HEAD>" and insert the following code:

<link rel="stylesheet" type="text/css" href="nav.css" />

11

Scroll below the opening "body" tag and click where you want the navigation bar to display. Insert the following code, but replace "#" with the website address you're linking to. Replace "Link 1," "Link 2," and "Link 3" with the text you want displayed in the navigation.

<div id="nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div>

12

Click "File" and "Save" from the menu to save the changes.

Items you will need

About the Author

Foye Robinson is a freelance writer and Web designer with Precision Web Crafting. She shares her love for family/relationships, fitness and Web design in her writing. Robinson holds a Bachelor of Science degree from Webster University and also writes miscellaneous articles and novels.

Photo Credits

  • photo_camera Comstock/Comstock/Getty Images