Sathish 226

Posted on Jun 2

Day 5: Session 1:Building a Beginner-Friendly Responsive Navigation Bar with Media Queries and Flexbox

#webdev #css #frontend #html

**Hey devs!!

Today I’m excited to share my Day 5 project — a small but important step in my learning journey.

I built a responsive navigation bar using only HTML and CSS, focusing on:
1.Flexbox layout
2.Media queries for mobile responsiveness
3.Basic positioning and display techniques

The navbar works smoothly across devices:

On small screens, it turns into a hamburger menu (☰),
On larger screens, it shows the links nicely in a horizontal row.

This project helped me understand:

How display:flex and flex-direction can change layouts

How media queries let you adjust styles for different screen sizes

Why position: absolute is useful for dropdown menus.

HTML + CSS Code Example:

Let me drop the full code first, and then I’ll explain step by step.

navbar.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" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">MySite</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="menu-icon">&#9776;</div>
    </nav>
</body>
</html>

style.css

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Navbar Styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    position: relative;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

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

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

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

/* Hamburger menu hidden on large screens */
.menu-icon {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
}

/* MEDIA QUERY for small screens */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #444;
    }

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

    .menu-icon {
        display: block;
    }

    /* Show nav links when menu is active (you can add JS later) */
    .nav-links.active {
        display: flex;
    }
}

What are we building?

We’re making a small navigation bar that:

1.Shows menu links horizontally on big screens (like desktop)
2.Collapses into a hamburger menu (☰) on small screens (like mobile)
3.Uses basic CSS techniques like display, flex-direction, position, and media queries

Key concepts:
1.Media Queries
Media queries let you apply CSS rules only when the screen size matches certain conditions.

In this code:

@media (max-width: 768px) { ... }

means:

If the screen width is 768px or less, apply these styles.
This is how we make the site responsive.

2.Display: block vs flex:

display: flex → puts items in a row or column, depending on flex-direction.
display: block → stacks elements vertically (by default).

We use:

display: flex;
flex-direction: row; /* default for nav bar */

and on small screens:

flex-direction: column;

to stack the menu vertically.

3.Position

We use:

position: absolute;

inside the media query to overlay the dropdown menu over the content, anchoring it under the nav bar.

Without position, the dropdown would push everything down.

4.Responsive Design

Using these tools, we adjust:

Layout (flex-direction)
Visibility (display: none vs display: flex)
Positioning (absolute to overlay)

This makes the navigation bar look good on all devices.

Output:

Keep Learn!! Happy Coding!!!

DEV Community

Day 5: Session 1:Building a Beginner-Friendly Responsive Navigation Bar with Media Queries and Flexbox

Top comments (0)