How to Create a Horizontal Navigation Bar Using CSS
Creating a horizontal navigation bar using CSS is a valuable HTML skill. You can build professional navigation bars which you can use in any website. You can change the color, font size and border colors without uploading new images or changing the code on every page.
- Difficulty:
- Moderately Easy
Instructions
-
-
1
Open your home page HTML file in notepad and create an unordered list of navigation items that you will include in your navigation bar on your home page. This is just a simple list like you would use to create a bulleted or numbered list on your webpage. It looks like this: <ul><li>Your first navigation heading</li><li>your second navigation page</li> and ends with </ul>.
-
2
Add the <nav> tag to the list tag. So, your HTML looks like this: <ul id="nav"><li id="nav-first page"><a href="link to your first page">First Page Navigation Heading</a></li> <li id="nav-secondpage"><a href="link to your second page">Second Page Heading</a></li> and so on.
-
3
Open your CSS file. This file is usually located in your css folder, and it contains all the definitions that tell the browser what your text, bullets and so on, will look like once displayed in the browser. Follow the link in the Resources to learn to write a .css file, if you do not have one.
-
4
Type in #nav at the top of the CSS style sheet. This identifies that this code relates to your navigation bar, since we defined this by the id=nav tag in the home page.
-
5
Set your margins and padding in the CSS style sheet to 0. So, type {margin:0; padding:0} in the CSS style sheet right after #nav. The first piece of code on the CSS style sheet is #nav {margin:0; padding:0}
-
6
Make the navigation bar align horizontally. Normally, a list in an HTML page displays vertically, so entering this part of the code in CSS, tells the browser to display this list of items across the page. Type #nav li {display:inline; padding:0; margin:0} in the CSS style sheet.
-
7
Add colors and other styles to your link items, not the entire list of items itself. To do this, you use the #nav link tag. This tells the browser to apply styles to the links and makes the entire tab click-able. Type #nav a:link, #nav a:visited {color:#000; background:#b2b580; }
-
1
Tips & Warnings
You can make many different types of navigation bars by using different colors and styles on your CSS sheet. Learn more about CSS styles and you will be able to create very interesting and attractive horizontal navigation bars.
