How to Make a Navbar CSS
A navigation bar (navbar), or menu, can be placed horizontally across the top or bottom of a Web page. It can also be placed vertically along either side of the page. The navigation menu is a list of links with styles added to remove the bullets and numbering and place the links correctly on the page. You can create an external CSS file that contains the navbar styles so the navbar will look the same on each Web page across your entire website.
Other People Are Reading
Instructions
-
CSS Portion (Horizontal)
-
1
Open a blank plain text document.
-
2
Type the following lines:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
This will remove the bullets or numbering from the HTML list.
-
-
3
To force the list items to line up horizontally, rather than vertically, type the following lines:
li
{
display:inline;
}
Alternatively, you can float the list items by replacing "display: inline;" with "float:left;" and adding the following lines to the file:
a
{
display:block;
width:50px;
}
-
4
Save the file with the ".css" file extension (i.e., "navbar.css").
CSS Portion (Vertical)
-
5
Open a blank plain text document.
-
6
Type the following lines:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
This will remove the bullets or numbering from the HTML list.
-
7
To make the entire link area clickable and specify the width, type the following lines:
a
{
display:block;
width:50px;
}
The elements will span the entire width of the block.
-
8
Save the file with the ".css" file extension (i.e., "navbar.css").
HTML Portion
-
9
Open a blank plain text document.
-
10
To begin the HTML document, tpe the line:
<html>
-
11
To link to the CSS file, type the lines:
<head>
<link rel="stylesheet" type="text/css" href="navbar.css" />
</head>
-
12
To create the navigation menu, type the following lines:
<body>
<ul>
<li><a href="example1.html">Link 1</a></li>
<li><a href="example2.html">Link 2</a></li>
<li><a href="example3.html">Link 3</a></li>
<li><a href="example4.html">Link 4</a></li>
</ul>
</body>
Replace "example1.html," "example2.html," "example3.html" and "example4.html" with the URLs for your links. Replace "Link 1," "Link 2," "Link 3" and "Link 4" with the text you want visible in the navigation menu.
-
13
Save the file with the ".html" file extension.
-
14
Open the file in any Web browser to see the navigation bar.
-
1
