Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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

2 Answers

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

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.