CSS3 Tutorial: Navigation Bars

by Ridwan Fadilah, updated on May 30, 2020 CSS3 Tutorial: Navigation Bars

Learn the basic tutorial of How to make navigation bars by using CSS3

The navigation was necessary for any website. Navigation could help the user to access all of the menus. The CSS is used to make the boring HTML menu transform into the looking-good navigation bars. However, the UX is important to note too.

In this tutorial, you'll learn about the CSS3 navigation bar. I'll show you how to make a simple navigation bar that easy to learn by beginners. Let's Begin!


List of Links

The navigation bar is a list of links. You need to use a standard HTML as a base of the navigation bar before using the CSS. You can use <ul> and <li> elements to make your first simple navigation bar.

Example:

-HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <!-- navigation bar -->

        <h2>My First Navigation Bar</h2>

        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>
    </body>

    </html>

- CSS

    ul {
        list-style: none; /* remove the bullets */
        margin: 0;
        padding: 0;
    }

Result:

CSS3 Tutorial: Navigation Bars - Example 1


Vertical Navigation Bar

The vertical navigation bar is navigation that keeps its content aligned with the main page. This navigation type usually placed in the side of the page and called as sidebar or side navigation bar. This navigation consumes more space on the page. However, you can also place it at the top of the page (usually on the device with small screen size).

To make it, let's see the example below.

Example:

-HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h2>Vertical Navigation Bar Example</h2>

        <ul class="vertical-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

    </body>

    </html>

- CSS

    ul.vertical-nav {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 250px;
        background-color: #b4b4b4;
    }

    ul.vertical-nav>li a {
        display: block; /* Displaying the links as block elements and make the whole link area clickable. */
        color: #000; /* text color */
        padding: 10px 15px;
        text-decoration: none; /* removes the underline */
    }

    /* Color link on hover */
    ul.vertical-nav>li a:hover {
        background-color: #4733ff;
        color: #fff;
    }

Result:

CSS3 Tutorial: Navigation Bars - Example 2


Center Links and Border

You can also add the border property to make a border around the navbar, or "text-align: center" to center the links.

Example:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h4>Center Links and Border</h4>

        <ul class="vertical-nav-2">
            <li><a href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

    </body>

    </html>

- CSS

    /* With border and center links */

    ul.vertical-nav-2 {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 250px;
        border: 1px solid #000;
        background-color: #b4b4b4;
    }

    /* center links & border */
    ul.vertical-nav-2>li {
        text-align: center;
        border-bottom: 1px solid #000;
    }

    ul.vertical-nav-2>li:last-child {
        border-bottom: none;
    }

    ul.vertical-nav-2>li a {
        display: block;  /* Displaying the links as block elements and make the whole link area clickable. */
        color: #000; /* text color */
        padding: 10px 15px;
        text-decoration: none; /* removes the underline */
    }

    /* Color link on hover */
    ul.vertical-nav-2>li a:hover {
        background-color: #4733ff;
        color: #fff;
    }

Result: 

CSS3 Tutorial: Navigation Bars - Example 3


Current Navigation Links

You can add an "active" class to the current link to let the user know which page they're on.

Example:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h4>Current Navigation Link</h4>

        <ul class="vertical-nav-3">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>
    </body>

    </html>

- CSS

    /* Current Navigation Link */

    ul.vertical-nav-3 {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 250px;
        background-color: #b4b4b4;
    }

    ul.vertical-nav-3>li a {
        
        display: block; 
        color: #000;
        padding: 10px 15px;
        text-decoration: none;
    }

    ul.vertical-nav-3>li a.active {
        background-color: #4733ff;
        color: #fff;
    }

    ul.vertical-nav-3>li a:hover {
        background-color: #555;
        color: #fff;
    }

Result:

CSS3 Tutorial: Navigation Bars - Example  4


Fixed and Full Height Side Navigation Bar

As I said before, vertical navigation is also called a sidebar. Now, I'll show you how to make a sidebar/side nav with a fixed position and the full height of the page by using the CSS3.

Example:

-HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <ul class="vertical-nav-fixed">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

        <div class="content">
            <h2>Fixed and Full Height Side Navigation Bar</h2>
            <h4>Lorem ipsum dolor sit amet consectetur.</h4>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, minus!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non eveniet voluptas consequuntur necessitatibus
                quod cum eaque incidunt. Aut maiores voluptatibus, quae, tenetur, quas voluptatum nobis nemo iusto illum
                quo ipsa.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat magnam nulla reiciendis!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, omnis laboriosam. Adipisci, minus
                mollitia eligendi voluptatem accusantium voluptates atque esse perferendis labore quo reiciendis
                inventore commodi recusandae totam veritatis repudiandae porro ab consequuntur! Voluptatum unde natus
                necessitatibus voluptatem praesentium sequi dolore architecto est saepe dolorem eveniet quae odit fugiat
                quos velit neque porro hic vero consectetur eligendi, perspiciatis quod sapiente? Obcaecati ipsam omnis
                optio sit perspiciatis accusamus est reiciendis aliquam, laudantium rem consequatur aspernatur sequi
                itaque velit pariatur animi, recusandae dicta cupiditate iure laborum, officiis et qui. Laudantium,
                dolores asperiores repellendus dolor quasi expedita itaque tempora sunt! Quisquam, sapiente blanditiis.
            </p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet debitis harum iure reiciendis molestias!</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus tenetur fuga esse architecto dolore cum
                quasi. Doloribus alias quia aperiam nam eius at incidunt maxime, itaque corporis eum ab dignissimos quas
                voluptas, officiis error nostrum. Deleniti ipsum quam blanditiis cupiditate, quis unde repellendus ullam
                laboriosam accusantium quae nisi non mollitia, incidunt fugit iste nihil reprehenderit reiciendis magni eius
                quo corporis vero sunt suscipit? Laudantium necessitatibus, incidunt, ipsam, tempora quis fugit distinctio
                dignissimos modi voluptas dolorum labore cupiditate molestiae! Modi ipsa fugit ea repellat aperiam aliquid,
                accusantium, doloribus impedit nesciunt perspiciatis ratione amet sint cum ducimus voluptatum
                exercitationem. Veritatis atque aspernatur id cumque earum labore et quibusdam dicta quasi sed esse sequi
                similique commodi nemo, suscipit provident veniam eius praesentium, magni aut dolore vero, rerum dolores.
                Eum ipsa eos laborum id exercitationem aperiam reprehenderit doloremque tempore aspernatur dolor, nam culpa
                optio mollitia voluptatibus eligendi accusamus distinctio blanditiis consequuntur dolorem, reiciendis ad
                asperiores unde quis amet. Accusantium cum voluptates earum dolores delectus autem debitis eos adipisci enim
                a excepturi accusamus optio neque, odit voluptate repudiandae pariatur nobis ab quos, iste dicta totam?
                Ducimus tempore doloremque libero vero nobis autem, nesciunt modi debitis adipisci rem officiis rerum
                soluta. Odio pariatur earum suscipit tempore.</p>
        </div>
    </body>

    </html>

- CSS

    div.content {
        margin-left: 25%;
        padding: 1px 16px;
        height: 1000px;
    }

    ul.vertical-nav-fixed {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 25%;
        background-color: #b4b4b4;
        position: fixed;
        height: 100%;
        overflow: auto;
    }

    ul.vertical-nav-fixed>li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }

    ul.vertical-nav-fixed>li a.active {
        background-color: #4733ff;
        color: #fff;
    }

    /* Color link on hover */
    ul.vertical-nav-fixed>li a:hover {
        background-color: #555;
        color: #fff;
    }

When you scroll, the side navigation will keep their position:

CSS3 Tutorial: Navigation Bars - Example 5


Horizontal Navigation Bar

By using CSS, you can also make a horizontal navigation bar. This navigation bar is placed at the top of each page and also called as topbar or top nav. To make a horizontal navigation bar, you can use the inline or the floating list items.

Example (inline list items):

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h2>Horizontal Navigation Bar</h2>

        <h4>Inline List Items</h4>
        <ul class="horizontal-nav-inline">
            <li><a href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

        <h4>Float List Items</h4>
        <ul class="horizontal-nav-float">
            <li><a href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

        <p>Be sure !DOCTYPE is specified. If not, floating items can produce unexpected results.</p>

    </body>

    </html>

- CSS

    /* Horizontal Nav Bar */

    ul.horizontal-nav-inline {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    ul.horizontal-nav-inline>li {
        display: inline;
    }

    ul.horizontal-nav-float {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    ul.horizontal-nav-float>li {
        float: left;
    }

    ul.horizontal-nav-float>li a {
        display: block;
        padding: 8px;
        background-color: #b4b4b4;
    }

Result:

CSS3 Tutorial: Navigation Bars  - Example 6

Here's another example of the horizontal navigation bar with a style change by using the CSS3:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <h4>CSS3 Horizontal Navigation Bar</h4>
        <ul class="horizontal-nav-css">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

    </body>

    </html>

- CSS

    ul.horizontal-nav-css {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #b4b4b4;
    }

    ul.horizontal-nav-css>li {
        float: left;
    }

    ul.horizontal-nav-css>li a {
        display: block;
        color: #000;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    ul.horizontal-nav-css>li a.active {
        background-color: #4733ff;
        color: #fff;
    }

    ul.horizontal-nav-css>li a:hover {
        background-color: #555;
    }

Result:

CSS3 Tutorial: Navigation Bars  - Example 7


Right Align items

The CSS3 allows you to add some items at the right or left floating horizontal navigation bar. This example below will explain to you how to add a right-align item.

Example:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS3 - Navigation Bars</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <h4>Right Align Items</h4>
        <ul class="nav">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li style="float: right;"><a href="pagelink3.html">Page 3</a></li>
        </ul>

    </body>

    </html>

- CSS

    /* Right Align Items */
    ul.nav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #b4b4b4;
    }

    ul.nav>li {
        float: left;
    }

    ul.nav>li a {
        display: block;
        color: #000;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    ul.nav>li a.active {
        background-color: #4733ff;
        color: #fff;
    }

    ul.nav>li a:hover {
        background-color: #555;
    }

Result:

CSS3 Tutorial: Navigation Bars -  Example 8


Fixed Horizontal Navigation

The same as the vertical navigation bar, the CSS3 allows you to make the horizontal navigation bar have a fixed position at the top or bottom.

Example (Fixed Top):

- HTML 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Fixed Top Navbar</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <style>
        body {
            margin: 0;
        }
    </style>
    <body>

        <ul class="topnav">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

        <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
            <h1>Fixed Top Navigation Bar</h1>

            <h2>The navigation bar will stay at the top of the page while scrolling</h2>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptatum voluptate impedit voluptates tenetur
                alias nisi, inventore consequuntur libero vero dicta id maxime soluta ea aperiam deserunt doloribus
                reprehenderit unde, consectetur dignissimos quidem tempore voluptas explicabo! Blanditiis assumenda ipsa alias
                atque doloremque doloribus distinctio omnis iure eos facilis accusamus nisi est eum esse ad sunt quasi nihil
                beatae reprehenderit, vero ab porro quidem pariatur iste? Est perferendis necessitatibus, voluptatum molestias
                magni aliquam ullam? Veritatis facilis esse totam atque tenetur deleniti illum? Animi ut non praesentium
                cupiditate, molestias nam rem amet saepe corporis ad maxime, commodi nemo et, incidunt ab. Eaque, harum. Nisi
                iure, quia omnis culpa molestiae fuga fugit accusantium error tenetur velit ipsam ullam cupiditate a itaque
                facilis vel exercitationem laudantium illo? Error eum fugiat ipsam dicta nostrum, consectetur iusto aperiam
                similique sed illum aliquam quae temporibus necessitatibus rerum nulla magnam eligendi id pariatur repudiandae
                earum, sit quod accusantium. Odio voluptatem dolor quaerat incidunt consectetur nisi tempore deleniti cumque
                rerum ea. Quo asperiores officia molestiae totam eos fugit porro, dolorem, unde earum quam aut dicta, in numquam
                temporibus soluta deserunt! Vero soluta molestias quia! Rem aperiam, tempore possimus quia perspiciatis
                explicabo cupiditate error, assumenda, accusantium debitis harum aut nesciunt!</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, necessitatibus adipisci!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, deleniti amet, consequuntur, voluptate ullam
                placeat dolorem esse ducimus dolorum iusto voluptatem dolores aperiam delectus voluptatibus expedita ipsa fugit.
                Dolorem, blanditiis!</p>
        </div>
    </body>
    </html>

- CSS

    /* fixed top-nav */

    ul.topnav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #bebebe;
        position: fixed;
        top: 0;
        width: 100%;
    }

    ul.topnav>li {
        float: left;
    }

    ul.topnav>li a {
        display: block;
        color: #000;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    ul.topnav>li a:hover:not(.active) {
        background-color: #555;
        color: #fff;
    }

    ul.topnav>li a.active {
        background-color: #4733ff;
    }

(Fixed Bottom):

- HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Fixed Bottom Navbar</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <style>
        body {
            margin: 0;
        }
    </style>

    <body>
        <ul class="bottom-nav">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="pagelink1.html">Page 1</a></li>
            <li><a href="pagelink2.html">Page 2</a></li>
            <li><a href="pagelink3.html">Page 3</a></li>
        </ul>

        <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
            <h1>Fixed Top Navigation Bar</h1>

            <h2>The navigation bar will stay at the top of the page while scrolling</h2>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptatum voluptate impedit voluptates
                tenetur
                alias nisi, inventore consequuntur libero vero dicta id maxime soluta ea aperiam deserunt doloribus
                reprehenderit unde, consectetur dignissimos quidem tempore voluptas explicabo! Blanditiis assumenda ipsa
                alias
                atque doloremque doloribus distinctio omnis iure eos facilis accusamus nisi est eum esse ad sunt quasi nihil
                beatae reprehenderit, vero ab porro quidem pariatur iste? Est perferendis necessitatibus, voluptatum
                molestias
                magni aliquam ullam? Veritatis facilis esse totam atque tenetur deleniti illum? Animi ut non praesentium
                cupiditate, molestias nam rem amet saepe corporis ad maxime, commodi nemo et, incidunt ab. Eaque, harum.
                Nisi
                iure, quia omnis culpa molestiae fuga fugit accusantium error tenetur velit ipsam ullam cupiditate a itaque
                facilis vel exercitationem laudantium illo? Error eum fugiat ipsam dicta nostrum, consectetur iusto aperiam
                similique sed illum aliquam quae temporibus necessitatibus rerum nulla magnam eligendi id pariatur
                repudiandae
                earum, sit quod accusantium. Odio voluptatem dolor quaerat incidunt consectetur nisi tempore deleniti cumque
                rerum ea. Quo asperiores officia molestiae totam eos fugit porro, dolorem, unde earum quam aut dicta, in
                numquam
                temporibus soluta deserunt! Vero soluta molestias quia! Rem aperiam, tempore possimus quia perspiciatis
                explicabo cupiditate error, assumenda, accusantium debitis harum aut nesciunt!</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, necessitatibus adipisci!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, deleniti amet, consequuntur, voluptate ullam
                placeat dolorem esse ducimus dolorum iusto voluptatem dolores aperiam delectus voluptatibus expedita ipsa
                fugit.
                Dolorem, blanditiis!</p>
        </div>
    </body>

    </html>

- CSS

    /* Fixed bottom-nav */

    ul.bottom-nav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #bebebe;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    ul.bottom-nav>li {
        float: left;
    }

    ul.bottom-nav>li a {
        display: block;
        color: #000;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    ul.bottom-nav>li a:hover:not(.active) {
        background-color: #555;
        color: #fff;
    }

    ul.bottom-nav>li a.active {
        background-color: #4733ff;
    }

Result:

CSS3 Tutorial: Navigation Bars - Example 9


Ok, the tutorial about CSS3 Navigation Bars has finished. That's just a basic of CSS3 Navigation Bars. If you want to learn more about the CSS3 tutorial, you can find that in the next chapter.

You can also find the full source code of these examples on our GitHub.

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thanks!

Loading…