Challenge - Responsive navbar
Build a mobile-first responsive navbar.
Mobile-first navbar
A navbar is vertical on mobile and horizontal on desktop. With a mobile-first approach, the small screen comes first: the menu uses flex-direction: column, and extra links hide with display: none.
Then @media (min-width: 768px) adds wide-screen declarations: flex-direction: row for horizontal layout, hidden links return with display: block. Mobile-first code doesn't break when narrowed; you add desktop styles, not remove them.
Exercise Build a responsive navbar
Complete the CSS below. On mobile .menu should stack vertically and the .extra link should be hidden. At 768px and above, .menu should be horizontal and .extra visible.
Show example solution
/* menu - mobile first */
.menu {
flex-direction: column;
}
/* extra link - mobile first */
.extra {
display: none;
}
/* wide screen */
@media (min-width: 768px) {
.menu {
flex-direction: row;
}
.extra {
display: block;
}
}Test yourself
-
Write the desktop direction
@media (min-width: 768px) { .menu { flex-direction: ____; } }Show answer
@media (min-width: 768px) { .menu { flex-direction: row; } } -
Which media query fits a mobile-first approach?
/* mobile first */ .menu { flex-direction: column; } /* wide screen */ @media (...) { .menu { flex-direction: row; } }- @media (max-width: 768px)
- @media (orientation: landscape)
- @media (min-width: 768px)
- @media (hover: none)
Show answer
@media (min-width: 768px) — Correct. min-width: 768px applies rules to 768px and above; it fits the mobile-first approach.
-
Match each navbar declaration to its role
- flex-direction: column
- Stacks menu vertically on mobile
- flex-direction: row
- Lays out horizontally on desktop
- display: none
- Hides a link
- display: block
- Restores a hidden link
- @media (min-width: 768px)
- Starts wide-screen declarations