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

[MyrinNew]

**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







lang="en">

charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
Responsive NavBar
rel="stylesheet" href="style.css">


class="navbar">
class="logo">MySite

• class="nav-links">
• href="#">Home
• href="#">About
• href="#">Blog
• href="#">Contact

class="menu-icon">☰











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!!!




More...