How To Build a Responsive Navigation Bar with Flexbox?

Last Updated : 02 Aug, 2024

A Responsive Navigation Bar is essential for modern web design to ensure users have a seamless experience across various devices, from desktops to mobile phones. Flexbox provides a powerful and straightforward way to create flexible and adaptable layouts.

Approach

Create a <nav> element for the navbar. Add a container for the logo and navigation links. Apply Flexbox to the .navbar container to align and distribute its child elements.
Use display: flex on the .navbar to position child elements in a row by default. Use justify-content: space-between to space out the logo and navigation links evenly.
Apply display: flex to the .nav-links to arrange the list items horizontally. In the media query for smaller screens, set .nav-links to display: none to hide links initially.
Use flex-direction: column to stack links vertically when visible. Initially hide the .menu-toggle using display: none on larger screens.
Show it using display: flex in the media query for smaller screens. Use flex-direction: column on the .menu-toggle to stack the bars vertically.

Example: Implementation to create a responsive navigation bar with Flexbox.

HTML

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

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

</head>

<body>
    <nav class="navbar">
        <div class="logo">
            <a href="#">MyLogo</a>
        </div>
        <ul class="nav-links">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="menu-toggle">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const menuToggle = document.querySelector('.menu-toggle');
            const navLinks = document.querySelector('.nav-links');

            menuToggle.addEventListener('click', () => {
                navLinks.classList.toggle('active');
            });
        });
    </script>
</body>

</html>