CSS - Navigation Bar

Quiz

Navigation bar is a section of a graphical user interface (GUI) that helps users navigate through a website, app, or other software. It is essential for users to quickly and easily navigate to the content they are looking for.

The navigation bar can be horizontal or vertical, that contains links to important pages or features.

How to Design a Responsive Navbar?
CSS Horizontal Navbar
CSS Vertical Navbar

CSS Fixed Navbar
Divider Lines for Navbar
Fixed Vertical Navbar
CSS Dropdown Navbar

Following are common steps followed to design a navbar in CSS:

HTML Structure: Use anchor tag ( <a> ) inside unordered list ( <ul> ) to obtain structure of navbar.
Remove Default Styles: Use the property 'list-style-type: none' to remove default styling and label of unordered list.
Flex Layout: Use the property display: flex for ul element and set flex-direction as row or column depending upon horizontal or vertical flexbox needed.
Responsive Design: Use CSS media queries to change between horizontal and vertical layout of navbar depending upon user screen width.
Hamburger Menu: Create a hamburger menu icon that toggles the visibility of the list on smaller screens.

Navbars can also contain other elements, such as the logo of the website or app, search bar, or social media icons. Navbars can be styled using CSS to change their appearance.

Following example shows a horizontal navigation bar, which is the most common type of navigation bar displayed across the top of a web page as shown below

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            color: #4CAF50;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%; 
            display: flex;
            flex-direction: row;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>

    <h1> Welcome to TutorialsPoint </h1>
    <h3> Simple Easy Learning at your fingertips </h3>
</body>

</html>

A vertical navigation bar is also known as a sidebar menu. It is typically positioned on the left or right side of the screen.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            color: #4CAF50;
            display: flex;
            flex-direction: row;
            gap: 10px;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>
    <div>     
        <h1> Welcome to TutorialsPoint </h1>
        <h3> Simple Easy Learning at your fingertips </h3>
    </div>
</body>

</html>

A dropdown navbar is a navigation bar with a drop-down menu that appears when a user hovers over a link. Dropdown menus are a way to show a list of related items in a small space.

Example

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
         href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            background-color: #2c3e50;
            overflow: hidden;
        }
        .navbar a {
            display: block;
            float: left;
            color: #ecf0f1;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s, color 0.3s;
        }
        .navbar a:hover {
            background-color: #34495e;
            color: #ecf0f1;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
        }
        .dropdown {
            float: left;
        }
        .dropdown .dropbtn {
            border: none;
            color: #ecf0f1;
            padding: 14px 20px;
            background-color: #2c3e50;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        .dropdown .dropbtn:hover {
            background-color: #4CAF50;
            color: #ecf0f1;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #34495e;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content a {
            float: none;
            color: #ecf0f1;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            transition: background-color 0.3s, color 0.3s;
        }
        .dropdown-content a:hover {
            background-color: #4CAF50;
            color: white;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <a href="#" class="active-link">Tutorialspoint</a>
        <a href="#">Home</a>

        <div class="dropdown">
            <button class="dropbtn">Articles
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="#">HTML</a>
                <a href="#">CSS</a>
                <a href="#">Bootstrap</a>
            </div>
        </div>

        <a href="#">Courses</a>
    </nav>

    <h1> Welcome to TutorialsPoint </h1>
    <h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>

A fixed navbar is a navigation bar that sticks to the top of the screen when the user scrolls down the page. To make a navbar fixed, you can use the position: fixed property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            height: 2000px;
            background-color: #e6e451;
        }
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #2c3e50;
        }
        .navbar a {
            display: block;
            float: left;
            color: #ecf0f1;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 17px;
            transition: background-color 0.3s, color 0.3s;
        }
        .navbar a:hover {
            background-color: #34495e;
            color: #ecf0f1;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
        }
        .heading {
            padding-top: 70px;
            text-align: center;
            background-color: #e6e451;
            padding-bottom: 300px;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <a href="#" class="active-link">
            Tutorialspoint
        </a>
        <a href="#">Home</a>
        <a href="#">Articles</a>
        <a href="#">Courses</a>
    </nav>

    <div class="heading">
        <h1> Welcome to TutorialsPoint </h1>
        <h2> Tutorialspoint CSS Fixed Navbar </h2>
        <h3>Scrolldown....</h3>
    </div>
</body>

</html>

You can also add a divider line between the links in the navbar using the border-right property as shown below

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            color: #4CAF50;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%; 
            display: flex;
            flex-direction: row;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            border-right: 5px solid green;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>

    <h1> Welcome to TutorialsPoint </h1>
    <h3> Simple Easy Learning at your fingertips </h3>
</body>

</html>

The following example demonstrates how the position: fixed property can be used to create a fixed vertical navbar, which ensures that the navbar stays on the left side of the screen, even when the user scrolls down the page.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            height: 1000px;
            margin-left: 35%;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            position: fixed;
            width: 30%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>

    <div>     
        <h1> Welcome to TutorialsPoint </h1>
        <h3> Simple Easy Learning at your fingertips </h3>
    </div>
</body>

</html>

Print Page

CSS - Navigation Bar

Table of Contents

How to Design a Responsive Navbar?

CSS Horizontal Navbar

Example

CSS Vertical Navbar

Example

CSS Dropdown Navbar

Example

CSS Fixed Navbar

Example

Divider Lines for Navbar

Example

Fixed Vertical Navbar

Example