Flexbox — Week 4: Building a Responsive Nav Bar

After a few weeks off from the Flexbox tutorial I’ve been working on to work on a few personal projects, it’s time to jump back into (and wrap up) Flexbox. For the final task of the tutorial, we were given a challenge that would tie everything we’ve learned so far together — create a responsive nav bar. This essentially means that our navigation will adapt its size based on the size of the screen being used to view it.

The starter code we’re working with is very similar to the code from previous exercises. The biggest difference is that instead of a button that just says “search”, we now have a search input type that a user can type in. Our first, and arguably most important, step for responsive design is to write a media query in our css. In this case, we will use @media all and (max-width: 600px) where 600px is the width of the screen. Within that we use flex to tell it what we want to do when the condition defined by the media query is met.

From there, you can set additional media queries for different-sized screens. You can control how many of the buttons show on each row, the order they show in, etc — all as a response to the change in screen size!