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

Next lesson: Challenge - Form and table

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies