Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Build a Responsive Navigation with Flexbox

Dean Conway
Dean Conway
3,301 Points

flex box container not working

Hi All,

Two questions....

I'm currently having a problem with my flex box container, they say that just but setting the parent container that contains the flex items to display: flex will mean the flex items inside will display in a row by default. but in my codepen, even though I have set the parent container to display flex, which in my case it is the ".nav-primary" class, but the nav items inside are still stacking?

Why is this happening?

Once I have worked out how to get the flexbox items to display in a row, how do I then get that row to be positioned inside the top header and not at the bottom where they currently sit.

Link to my code pen for inspection: http://codepen.io/Consecca/pen/RawBPm

  • Dean

2 Answers

Ihor Zhuk
Ihor Zhuk
13,263 Points

Hello, Dean!

You have specified display:flex property to the .nav-primary only.

.nav-primary has only one child, which is ul.

So instead of specifying display:flex property to .nav-primary, you should specify it to .nav-primary ul

Dean Conway
Dean Conway
3,301 Points

Ah ha! ok thanks Ihor, appreciate that! that was beginning to drive me nuts why that was not working.

and what about the second question, how would I then get that .nav-primary container to sit inside the top header, is there a way to reposition this using flexbox?