While working on a product landing page as an assignment for freeCodeCamp, I was trying to figure out how to make my navigation bar resize responsively. When the screen was large I wanted the navigation bar to look like this:

When the screen was smaller I wanted the navigation bar to look like this:

(please ignore the three horizontal black bars, they are a part of the freeCodeCamp test suite and not a part of my website.)

I set the flex-wrap of my flexbox to 'wrap', but I couldn't get the navigation bar to resize they way I wanted it to. When I resized the width of the web page, instead of moving to what you see in the second image after the webpage became too narrow to fit the full navigation bar, the 'pricing' link would jump to the next line, then the 'how it works' link, and so on...

Here is how I solved it: (I found the solution here).

I created an empty <div> between 'Aware Smart Guitars' and the 'Features' link.

<div id="break"></div>

Since this <div> was empty it did not change the layout of my navigation bar. Within a media query in the CSS, I set the flex basis of the <div> to 100%.

flex-basis: 100%;

Now, when the width of the browser window goes below a certain amount, the width of the empty <div> goes to 100%. Since the <div> is empty it has no height, so the only effect it has on the layout of the webpage is to force the three links in my navigation bar onto the next line.

I also have to increase the height of my navigation bar and change the alignment of the text in the media query, you can see how I do this by looking at my pen.

Here is the code:

  <div id="break"></div>

  @media screen and (max-width: 595px) {
  #break {
    flex-basis: 100%;

And here's the pen:

1,486 1 11