How to Create a Responsive Flexbox Navigation Bar in CSS

Introduction

A navigation bar (navbar) is an essential element for website navigation, offering users easy access to different sections or pages. Building a responsive navigation bar ensures that your website remains user-friendly across various devices, from desktops to mobile screens.

In this tutorial, you'll learn how to create a responsive navigation bar using Flexbox in CSS. We will style the navigation bar to be horizontal on larger screens and stack vertically on smaller screens.

Development Steps

Create the HTML Structure: Build the HTML structure for the navigation bar with links.
Style the Navbar Using Flexbox: Use Flexbox to create a horizontal layout for the navbar.
Make the Navbar Responsive: Apply media queries to adjust the navbar for smaller screens.
Add a Toggle Menu for Mobile: Create a toggle menu for mobile views for better user experience.
Customize the Navbar: Add custom styles for a polished look.

Step 1: Create the HTML Structure

We’ll begin by creating a simple HTML structure for the navigation bar. This includes a nav element containing a list of links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox Navbar</title>
</head>
<body>

    <!-- Step 1: Navigation Bar HTML Structure -->
    <nav class="navbar">
        <div class="logo">MyWebsite</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="burger-menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

</body>
</html>

Explanation:

The nav element serves as the navigation bar container.
nav-links is an unordered list containing the navigation links.
burger-menu is a placeholder for a hamburger icon, which will be used for the mobile version of the navbar.

Next, we’ll use Flexbox to style the navbar, making the links align horizontally on larger screens.

/* Step 2: Style the navigation bar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;  /* Flexbox layout */
    justify-content: space-between;  /* Space between logo and links */
    align-items: center;  /* Center items vertically */
    padding: 20px;
    background-color: #333;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.nav-links {
    display: flex;  /* Align links horizontally */
    list-style: none;  /* Remove default list style */
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.nav-links a:hover {
    color: #ff6347;  /* Change color on hover */
}

Explanation:

.navbar { display: flex; }: This creates a Flexbox layout, aligning the logo and the navigation links horizontally.
.nav-links { display: flex; }: The links inside the navbar are displayed in a row, with space between each item.
.nav-links a:hover { color: #ff6347; }: Changes the link color when hovered over.

Now, we’ll make the navigation bar responsive by applying media queries to adjust the layout for smaller screens. On mobile screens, we’ll hide the links and show a burger menu.

/* Step 3: Make the navbar responsive */
.burger-menu {
    display: none;  /* Hide the burger menu by default */
    cursor: pointer;
}

.burger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px;
    background-color: white;
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    .nav-links {
        display: none;  /* Hide links on mobile screens */
        flex-direction: column;  /* Stack links vertically */
    }

    .burger-menu {
        display: block;  /* Show the burger menu on smaller screens */
    }

    .nav-active {
        display: flex;  /* Show links when menu is toggled */
    }
}

Explanation:

.burger-menu { display: none; }: The burger menu is hidden by default and only appears on smaller screens.
@media (max-width: 768px) {}: When the screen width is 768px or less, the links are hidden, and the burger menu is displayed.
.nav-active { display: flex; }: This class will be added when the burger menu is clicked, making the links visible.

We’ll now add JavaScript to toggle the navigation links when the burger menu is clicked. This allows the menu to appear on mobile screens.

<script>
    const burger = document.querySelector('.burger-menu');
    const navLinks = document.querySelector('.nav-links');

    burger.addEventListener('click', () => {
        navLinks.classList.toggle('nav-active');
    });
</script>

Explanation:

burger.addEventListener: Adds an event listener to the burger menu that toggles the nav-active class, showing or hiding the navigation links on mobile.

Let’s add some additional styles to make the navbar more visually appealing and interactive.

/* Step 5: Additional styles */
.nav-links a {
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.nav-links a:hover {
    background-color: #ff6347;  /* Background changes on hover */
}

@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        background-color: #333;
        padding: 20px;
    }

    .nav-links li {
        margin: 10px 0;
    }
}

Explanation:

.nav-links a { padding: 10px 15px; }: Adds padding and rounded corners to the navigation links.
.nav-links a:hover { background-color: #ff6347; }: Changes the background color when the user hovers over a link.
@media (max-width: 768px): For smaller screens, the navigation links take up the full width and appear below the navbar.

Complete Code

Here’s the complete HTML, CSS, and JavaScript for creating a responsive Flexbox navigation bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox Navbar</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

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

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: white;
            font-size: 18px;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .nav-links a:hover {
            background-color: #ff6347;
        }

        .burger-menu {
            display: none;
            cursor: pointer;
        }

        .burger-menu span {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px;
            background-color: white;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 60px;
                right: 0;
                width: 100%;
                background-color: #333;
                padding: 20px;
            }

            .nav-links li {
                margin: 10px 0;
            }

            .burger-menu {
                display: block;
            }

            .nav-active {
                display: flex;
            }
        }
    </style>
</head>
<body>

    <!-- Responsive Navbar -->
    <nav class="

navbar">
        <div class="logo">MyWebsite</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="burger-menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <!-- JavaScript for Toggle Menu -->
    <script>
        const burger = document.querySelector('.burger-menu');
        const navLinks = document.querySelector('.nav-links');

        burger.addEventListener('click', () => {
            navLinks.classList.toggle('nav-active');
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a responsive navigation bar using Flexbox. We designed a navbar that works well on larger screens and becomes a burger menu on mobile devices. By incorporating Flexbox and media queries, you ensure that your website’s navigation is both functional and user-friendly across all screen sizes.

Java Guides

Search This Blog