Responsive Navbar
Flexbox aur media query se desktop links ko small screens par vertical navigation me stack karo.
Working code
<nav class="navbar">
<a class="logo" href="#">BrounStack</a>
<div class="links">
<a href="#">Home</a>
<a href="#">Learning</a>
<a href="#">Examples</a>
</div>
</nav>
<style>
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px;
background: #10233f;
}
.navbar a {
color: white;
text-decoration: none;
}
.links {
display: flex;
gap: 16px;
}
@media (max-width: 600px) {
.navbar,
.links {
align-items: flex-start;
flex-direction: column;
}
}
</style>Preview
BrounStackHome Learning Examples
How it works
Desktop par flex layout logo aur links ko row me rakhta hai.
@media (max-width: 600px) narrow viewport par direction ko column me switch karta hai. Ye CSS-only responsive layout hai; hamburger toggle ke liye JavaScript alag se chahiye.
Try Yourself
<nav class="navbar">
<a class="logo" href="#">BrounStack</a>
<div class="links">
<a href="#">Home</a>
<a href="#">Learning</a>
<a href="#">Examples</a>
</div>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 20px;
background: #222;
}
.links { display: flex; gap: 20px; }
@media (max-width: 700px) {
.navbar, .links { flex-direction: column; }
}
</style>