How to create a top navigation bar using CSS?

Last Updated : 29 Apr, 2024

A top navigation bar is a horizontal bar that typically contains links to different sections of a website. It is a fundamental part of a website's layout and helps users navigate easily. In this article, we will explore different approaches to creating a top navigation bar using CSS.

These are the following approaches:

Table of Content

Using Float property
Using flexbox

Using Float property

In this approach, we are using Using Float property to create a top navigation bar using CSS.

Syntax:

float: left

Example: Implementation of a top navigation bar using Float property.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Responsive Navbar</title>
    <link rel="stylesheet" type="text/css" 
          href="styles.css">

</head>
<style>
    /* styles.css */
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }

    .navbar {
        overflow: hidden;
        background-color: green;
    }

    .navbar a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 20px;
        text-decoration: none;
    }

    .navbar a:hover {
        background-color: #4CAF50;
        color: black;
    }

    .navbar a.icon {
        display: none;
    }

    @media screen and (max-width: 600px) {
        .navbar a:not(:first-child) {
            display: none;
        }

        .navbar a.icon {
            float: right;
            display: block;
        }

        .navbar.responsive {
            position: relative;
        }

        .navbar.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .navbar.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
    }
</style>

<body>

    <div class="navbar" id="myNavbar">
        <a href="#">GFG</a>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>

        <a href="javascript:void(0);"
           class="icon"
           onclick="toggleMenu()">
            &#9776;
        </a>
    </div>

    <script>
        function toggleMenu() {
            let navbar = document.getElementById("myNavbar");
            navbar.className = navbar.className === "navbar" ?
                               "navbar responsive" : "navbar";
        }
    </script>
</body>

</html>

Output:

Using flexbox

In this approach, we are using Using flexbox to create a top navigation bar using CSS.

Syntax:

display: flex;
flex-direction: column;

Example: Implementation of a top navigation bar using flexbox.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Responsive Navbar</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: green;
            padding: 14px 20px;
        }

        .navbar a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
        }

        .navbar a:hover {
            background-color: #4CAF50;
            color: black;
        }

        .navbar .logo {
            flex: 1;
        }

        .navbar .menu {
            display: flex;
        }

        .navbar.responsive .menu {
            display: block;
        }

        .navbar .icon {
            display: none;
        }

        @media screen and (max-width: 600px) {
            .navbar .icon {
                display: block;
                cursor: pointer;
            }

            .navbar .menu {
                display: none;
            }

            .navbar.responsive .menu {
                display: flex;
                flex-direction: column;
                background-color: green;
                position: absolute;
                top: 15%;
                left: 0;
                right: 0;
            }

            .navbar.responsive .menu a {
                padding: 10px 20px;
                /* text-align: center; */
            }
        }
    </style>
</head>

<body>

    <div class="navbar" id="myNavbar">
        <p href="#" class="logo">GFG</p>
        <div class="menu">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>

        <a href="javascript:void(0);"
           class="icon" 
           onclick="toggleMenu()">
            &#9776;
        </a>
    </div>

    <script>
        function toggleMenu() {
            let navbar = document.getElementById("myNavbar");
            navbar.classList.toggle("responsive");
        }
    </script>
</body>

</html>