CSS
Build a Responsive Flexbox Navigation Menu
Implement a flexible navigation menu that transitions from horizontal on large screens to a vertical stack on smaller devices using Flexbox and media queries.
.nav-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
}
.nav-item a {
display: block;
padding: 15px 20px;
color: white;
text-decoration: none;
}
.nav-item a:hover {
background-color: #555;
}
@media (max-width: 768px) {
.nav-list {
flex-direction: column; /* Stack items vertically on smaller screens */
align-items: stretch; /* Make items full width */
}
.nav-item a {
text-align: center;
}
}
How it works: This snippet creates a responsive navigation menu using Flexbox. On larger screens, `display: flex` arranges the navigation items horizontally. A media query targets screens up to 768px wide, changing the `flex-direction` to `column` to stack the items vertically. `align-items: stretch` ensures the vertically stacked items take up the full width of their container, creating a clean mobile navigation experience.