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

Dean Conway
Dean Conway
3,301 Points
Posted by Dean Conway
Dean Conway
3,301 Points

responsive navigation

I have built a code pen where on smaller mobile screens you get a menu overlay appear with a list of stacked menu items using the flex box method, which is great and is exactly what I want, but now I want to display the navigation menu as a horizontal list but only when there is enough room at wider screen sizes inside the black header and aligned to the far right.

How would achieve this with the flex box method?

So far I have tried fiddling with the nav-primary class inside of a new media query so it would only start to show up around the 608px mark(38em) but not having much luck at the mo.

Link to my current efforts in code pen: http://codepen.io/Consecca/pen/pgXmOd

chrisverra
chrisverra
3,760 Points

never used flexbox, but have you ever looked at media queries?

https://css-tricks.com/css-media-queries/

2 Answers

dman10345
dman10345
7,109 Points
dman10345
dman10345
7,109 Points

Have you tried looking at a feature called "Flex Wrap"? It is similar to typing in a word document. It will attempt to fit everything on one line but whatever it can not fit it will wrap to the next line.

Could use something similar to:

.menu-items {
    flex-wrap: wrap; //you could even to wrap-reverse to wrap on to the next line backwards
}
Dean Conway
Dean Conway
3,301 Points
Dean Conway
Dean Conway
3,301 Points

Hi both, thanks for both of your responses but I'm not so sure it was the answers I was looking for, most of the problem stems from the positioning of that nav list wrapping container, and i don't know how get it to appear in that top black header on the far right and that is what I am struggling with.