How To Create Horizontal Navigation Bar In Html

TL;DR – CSS navigation bar is a list of links that help users navigate to different parts of web sites.

Link1
Link2
Link3
Link4

1. CSS Navigation Bar: Main Tips
2. Defining Navbars
3. Vertical Navigation Bar
3.1. Ways to Style Vertical Navbars
3.2. Active Navigation Links
3.3. Centering Links & Adding Borders
3.4. Fixed Height of a Vertical Navbar
4. Horizontal Navigation Bar
4.1. Inline List Items
4.2. Floating List Items
4.3. Hovering Over Horizontal Navigation Bar
4.4. Active Navigation Links
4.5. Adding Borders
4.6. Fixed Position
5. CSS Navigation Bar: Useful 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:

Example

                              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)

Ordered
list

Unordered
list

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

Link1
Link2
Link3
Link4

Example

                              <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:

Example

                              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.

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

Example

                              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:

Example

                              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; }

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:

Example

                              .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:

Example

                              ul                {                border:                2px                solid black; }                li                {                text-align: center;                border-bottom:                1px                solid                rgb(0, 0, 0); }                li                :last-child                {                border-bottom: none; }

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.

Example

                              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 */                }

Pros

Simplistic design (no unnecessary information)
High-quality courses (even the free ones)
Variety of features

Main Features

Nanodegree programs
Suitable for enterprises
Paid certificates of completion

Pros

Easy to navigate
No technical issues
Seems to care about its users

Main Features

Huge variety of courses
30-day refund policy
Free certificates of completion

Pros

Great user experience
Offers quality content
Very transparent with their pricing

Main Features

Free certificates of completion
Focused on data science skills
Flexible learning timetable

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.

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:

Example

                              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

Example

                              <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>

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

Example

                              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; }

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

Example

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

Adding Borders

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

Example

                              /* 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:

Example

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

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

Example

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

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.