How to Build a Navigation Bar
A navigation bar is an important part of your website that you will want to have if you have several sections or pages on your site. Users must click the "Back" button or use the address bar to navigate a site without a navigation bar, which can be confusing and can make it difficult for users to see all that a site has to offer. Creating a navigation bar requires CSS and HTML skills.
Other People Are Reading
Instructions
-
-
1
Log in to your Web server and open the HTML page on which you want to add the navigation bar.
-
2
Click on the page just after the opening <head> tag. Insert the following CSS code:
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
-
-
3
Click your cursor between the <body> and </body> tags of the section where you want to include the navigation bar. Insert the following HTML code:
<ul>
<li><a href="http://www.website.com/blog">Blog</a></li>
<li><a href="http://www.website.com//info">Business Information</a></li>
<li><a href="http://www.website.com/buy">Purchase</a></li>
<li><a href="http://www.website.com/more">More</a></li>
</ul>
-
4
Replace the URL in each line of text with the URL of the Web page that you want to open when a user clicks the corresponding section of the navigation bar.
-
5
Replace "Blog," "Business Information," "Purchase" and "More" with the text that you want to appear on the navigation bar.
-
6
Publish the page.
-
1
Tips & Warnings
You can replace the "color" codes in the HTML with any color you want to use. Two sample color codes are "#2B60DE" for royal blue and "#FF0000" for red. See Resources for a list of color codes.
