Create a Vertical or Horizontal CSS Navigation Bar Easily

• Link1
• Link2
• Link3
• Link4

CSS Navigation Bar: Main Tips

• Navbar in CSS refers to a group of links that lead to different pages of a web site.
• Navbars are either vertical or horizontal.
• The <nav> element should wrap primary bars such as the main navigation links of web sites.

Defining Navbars

A CSS navigation bar is a collection of links. This example shows a functional and styled navigation bar:

ul {
    border: 2px solid #e7e7e8;
    background-color: #e7e7e8;
}

li a {
    color: white;
}

HTML creates the base of a navbar with two elements:

• <li> (defines an item of a list)
• <ul> (defines an unordered list)

1. Ordered
2. list

• Unordered
• list

In these examples, HTML list elements create the functional part of navbars:

• Link1
• Link2
• Link3
• Link4

<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

It is necessary to remove the browser default settings for navbars:

• list-style-type: none removes the bullets from CSS navigation bars.
• margin: 0; and padding: 0; removes the browser default spacing settings.
• These properties are for both horizontal and vertical navigation bars.

In the example, we remove padding, margins, and the bullets from the list:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

<nav> Element

The <nav> element indicates that a group of links are for navigation. However, placing the ordered or unordered lists in this element is not a requirement.

Tip: you should place your navigation bar in <nav> for major bars.

Vertical Navigation Bar

The vertical navigation bar appears as a regular list of links. The vertical bar is useful for web navigation and can easily become a dropdown menu.

• Link1
• Link2
• Link3
• Link4

li a {
    display: block;
    width: 50px;
    color: purple;
    background-color: cornsilk;
    text-decoration: none;
}

li a:hover {
    background-color:aliceblue;
}

Here are some points about the example above:

• Remember to remove the default browser styles (margin, padding, bullet points).
• Add text-decoration: none; to remove the underline.
• Add various properties to customize the CSS vertical navigation bar.
• The :hover selector indicates that when the mouse cursor moves over a link in the CSS navbar, the background color changes.

Ways to Style Vertical Navbars

Styling properties can make CSS navigation bars match various web designs. You can experiment by adding different background colors, changing the font family or the text alignment.

This example creates a vertical navigation bar. However, styling properties change when :hover triggers:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #8842d5;
}

li a {
    display: block;
    color: white;
    padding: 9px 17px;
    text-decoration: none;
}

/* When the link is hovered on, its color will change */
li a:hover {
    background-color: #7300ff;
    color: black;
}

Active Navigation Links

You can add styles to a CSS navigation bar when users click on one of the links. You should use the :active selector to indicate the state for which the new styling rules should apply:

.active {
    background-color: #7300ff;
    color: black;
}

Centering Links & Adding Borders

• Link1
• Link2
• Link3
• Link4

The text inside the CSS navigation bar appears on the left side by default. You can easily change this rule by adding text-align:center to make sure that all links appear at the center of the navbar.

Note: set text-align property to left or right to move the text to those directions.

It is possible to separate the CSS navigation menu from the rest of the website by adding borders.

This example adds borders and centers the text:

ul {
    border: 2px solid black;
}

li {
  text-align: center;
  border-bottom: 1px solid rgb(0, 0, 0);
}

li:last-child {
  border-bottom: none;
}

Fixed Height of a Vertical Navbar

You can set the CSS navigation bar to be on the specified side and continue until the end of the page:

• Set the height to 100%.
• Indicate the permanent position with fixed.
• Add overflow: auto to insert a scrollbar to the navigation bar.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 30%;
    background-color: #8842d5;
    height: 100%; /* This enables full height */
    position: fixed; /* The position will be constant */
    overflow: auto; /* This enables scrolling */
}

Horizontal Navigation Bar

• Link1
• Link2
• Link3
• Link4

CSS creates horizontal navigation bars by:

• Assigning display: inline property to a list of links.
• Using float.

Inline List Items

CSS builds a horizontal CSS navbar with the display:inline property assigned to <li> elements.

Tip: <li> elements are block elements by default. The inline value displays links a row instead of new lines.

li {
    display: inline;
}

Floating List Items

The second way of creating a horizontal navbar is the float property. It sets the layout for navigation links by floating the <li> elements.

The float property can use two keywords: left or right.

In the example below, we create a CSS navigation bar by using float: right:

li {
    float: right;
}

a {
    display: block;
    padding: 9px;
    background-color: #8842d5;
}

In the example, one of the links moves to the right with the float:right:

• Link1
• Link2
• Link3
• Link4

<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li style="float: right;"><a class="active" href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

Hovering Over Horizontal Navigation Bar

This example adds :hover to the horizontal navigation bar in order to change the background color when cursors enter it:

ul {
    list-style-type: none;
    margin: 1px;
    padding: 1px;
    overflow: hidden;
    background-color: #8842d5;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: left;
    padding: 15px 17px;
    text-decoration: none;
}

/* A color changes when hovered over */
li a:hover {
    background-color: #7300ff;
}

Active Navigation Links

This example adds the :active selector to change the styling of the link when users click on it:

li a.active {
    background-color: #7300ff;
}

Adding Borders

CSS borders add a visible separation between the navbar and the rest of the content.

/* All items except the last one will have a border on the right side */
li {
    border-right: 2px solid white;
}

li:last-child {
    border-right: none;
}

Fixed Position

You can make the CSS navigation bar permanently stay at the bottom or the top of the page regardless of scrolling.

position: fixed and top: 0 create the navigation bars that are fixed at the top:

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

position: fixed and bottom: 0 create navigation bars that are fixed at the bottom:

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

CSS Navigation Bar: Useful Tips

• Bootstrap can also help you improve web sites with navigation bars.
• Do not forget about keeping web sites responsive. Read about media queries to guarantee that your CSS navbars look neat on all devices.