Grokking CSS for Web Development
Vote

0% completed

​

Create a Responsive Menu Bar

Three links side by side fill a laptop screen well, but on a 375 pixel wide phone each one would get only about 120 pixels. A responsive menu bar solves that by changing direction at a chosen width. This challenge combines Flexbox, a media query, and the :hover state from earlier chapters.

The requirements

Build a menu bar that meets these requirements:

  • It is a horizontal bar on screens wider than 600px.
  • Its items stack vertically when the viewport is 600px wide or less.
  • It contains at least three menu items.
  • Each menu item changes its background color on hover.

.....

.....

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%

Vote for new content