How to Make a Horizontal Navbar With CSS
A navigation bar helps your visitors access all areas of your website or blog. If you wish to create a horizontal navigation bar, rather than a vertical one, you can do so by creating a basic HTML (Hypertext Markup Language) list and applying CSS (Cascading Style Sheets) styles to the code. This list requires no special scripts and will display in any browser that supports CSS, including mobile device browsers.
Other People Are Reading
Instructions
-
-
1
Insert the following code after the opening "<head>" tag in your HTML document and before the closing </head> tag.
<style type="text/css">
#navbar li
{
display: inline;
margin: 5px 0;
list-style-type: none;
}
#navbar a
{
text-decoration: none;
}
</style>
-
2
Paste the following code after the "<body>" tag in your HTML element to create the list that will be the basis of your navigation bar.
<ul id="navbar">
<li><a href="URL1">Link 1</a></li>
<li><a href="URL1">Link 2</a></li>
<li><a href="URL1">Link 3</a></li>
<li><a href="URL1">Link 4</a></li>
</ul>
-
-
3
Change the values for "URL1," "URL2" and so on to the actual links where you wish to direct your visitors. Change the link text -- "Link1" and "Link2" among others -- to descriptive text that will inform your visitors where the links lead. You can add text without links by adding a line similar to this in your list:
<li>Your Text Goes Here</li>
-
4
Customize your navigation bar by adding styles in the CSS in the head of your document. For example, you can add a basic background color (black), font color (red) and border (gray) with the following changes:
#navbar li
{
display: inline;
margin: 5px 0;
list-style-type: none;
padding: 5px;
border: 1px solid #808080;
background: #000;
color: #FF0000;
}
#navbar a
{
text-decoration: none;
color: #FF0000;
}
-
5
Save your HTML/Web document.
-
1
Tips & Warnings
If your list is wider than your visitor's screen, it will wrap to the next line.
You can apply almost any CSS property to your list, individual list items or contained link test.
Link names should clearly explain the destination page.
If you have a separate CSS file, insert the navigation CSS into that file and save it. Add your list HTML to your Web page/HTML file.
