YouTipVertical
- Home
- News
- Contact
- About
Horizontal
- Home
- News
- Contact
- About
- Home
- News
- Contact
- About
Navbar
Making a good-looking navigation bar with CSS is important for any website.
With CSS you can transform a boring HTML menu into a good-looking navigation bar.
Navbar = Link List
A standard HTML basis is a navigation bar.
In our example we will create a standard HTML list navbar.
A navigation bar is basically a list of links, so using the
- and
- elements makes sense:
Example
Try it yourself »Now, let's remove the margin and padding from the list:
Example
ul {list-style-type:none; margin:0; padding:0; }
Try it yourself »Explanation of the example:
- list-style-type:none - Removes the bullets from the list. A navigation bar does not need list markers
- Remove browser default settings and set margin and padding to 0
The code above is the standard code used for vertical and horizontal navbars.
Vertical Navbar
The code above, we just need to add some styles to the elements, to make a vertical navbar:
Example
a {display:block; width:60px; }
Try it yourself »Explanation of the example:
- display:block - Display the links as block elements, which makes the whole link area clickable (not just the text), it also allows us to specify a width
- width:60px - Block elements take up the full available width unless a width is specified. We want to specify a width of 60px
Note: Check out the example of a fully styled vertical navbar.
Note: It is important to specify the width of the elements in a vertical navbar. If you omit the width, IE6 may produce unexpected results.
Vertical Navbar Example
Create a simple vertical navbar example, change the background color when the mouse moves over an option:
- Home
- News
- Contact
- About
Example
ul {list-style-type:none; margin:0; padding:0; width:200px; background-color:#f1f1f1; }
Try it yourself »
li a {display:block; color:#000; padding:8px 16px; text-decoration:none; }
li a:hover {background-color:#555; color:white; }
Active/Current Navbar Example
After clicking on an option, we can add the "active" class to indicate which option is selected:
- Home
- News
- Contact
- About
Example
li a.active {background-color:#4CAF50; color:white; }
Try it yourself »
Create Links and Add Borders
You can add text-align:center style to center the links.
You can add a border property to the
- to give the navbar borders. If you want to add borders to each option, add a border-bottom to each
- element:
Example
ul {border:1px solid #555; }
Try it yourself »
li {text-align:center; border-bottom:1px solid #555; }
li:last-child {border-bottom:none; }
Fullscreen Height Fixed Navbar
Next we will create a fixed navbar on the left side that is full height, and a scrollable content area on the right.
Example
ul {list-style-type:none; margin:0; padding:0; width:25%; background-color:#f1f1f1; height:100%; position:fixed; overflow:auto; }
Try it yourself »Note: This example works on mobile devices.
Horizontal Navbar
There are two ways to create a horizontal navbar. Using inline or float list items.
Both methods are good, but if you want all links to have the same size, you must use the float method.
Inline List Items
One way to create a horizontal navbar is to specify the elements as inline, here is the standard inline:
Example
li {display:inline; }
Try it yourself »Explanation of the example:
- display:inline; - By default,
- elements are block elements. Here we remove the line breaks before and after each list item, to display them in one line.
Note: Check out the example of a fully styled horizontal navbar.
Floated List Items
In the example above the links have different widths.
To make all links have the same width, float the
- elements, and specify the width of the elements:
Example
li {float:left; }
Try it yourself »
a {display:block; width:60px; }Explanation of the example:
- float:left - Use float to slide block elements next to each other
- display:block - Display the links as block elements, which makes the whole link area clickable (not just the text), it also allows us to specify a width
- width:60px - Block elements take up the full available width unless a width is specified. We want to specify a width of 60px
Note: Check out the example of a fully styled horizontal navbar.
Horizontal Navbar Example
Create a horizontal navbar, change the background color when the mouse moves over an option.
Example
ul {list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333; }
Try it yourself »
li {float:left; }
li a {display:block; color:white; text-align:center; padding:14px 16px; text-decoration:none; }
li a:hover {background-color:#111; }Active/Current Navbar Example
After clicking on an option, we can add the "active" class to indicate which option is selected:
Example
.active {background-color:#4CAF50; }
Try it yourself »Right Align Links
Set the rightmost option in the navbar to align right (float:right;):
Example
Try it yourself »Add Dividers
Add dividers between
- elements using the border-right style:
Example
li {border-right:1px solid #bbb; }
Try it yourself »
li:last-child {border-right:none; }Fixed Navbar
You can fix the navbar at the top or bottom of the page:
Fixed Top
ul {position:fixed; top:0; width:100%; }
Try it yourself »Fixed Bottom
ul {position:fixed; bottom:0; width:100%; }
Try it yourself »Note: This example works on mobile devices.
Gray Horizontal Navbar
ul {border:1px solid #e7e7e7; background-color:#f3f3f3; }
Try it yourself »
li a {color:#666; }
More Examples
```