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
Aaron HARPT
19,845 PointsUsing flexbox in the navigation
I am currently changing the website in how to build a simple website course, and doing the layout using flexbox. At the 660px breakpoint, the navigation is supposed to change (you can look at the workspace). I am wondering how to achieve this using flexbox.
6 Answers
Jonathan Grieve
Treehouse Moderator 91,252 PointsTypically in flexbox if you wanted to change how the navigation aligns from main to cross axis you would use the flex-direction property in flexbox.
flex-direction: column, would achieve this
.nav {
display: flex;
flex-direction: column;
justify-content: center;
}
This should change the appearance of your mobile navigation (in the appropriate media query) other widths should not be affected,
Aaron HARPT
19,845 PointsI don't know if you looked at the finished workspace from the How to build a website course, but the navigation is still laid out horizontally.
Jonathan Grieve
Treehouse Moderator 91,252 PointsHi Aaron, I don't have access to your workspace or code but if you wanted to display flex items at the top and vertically central that's how you would do it.
Are you able to fork out your workspace so we can take a look at the code and help?
Jonathan Grieve
Treehouse Moderator 91,252 PointsHere's a nice website that will help you understand flexbox and what the different flexbox properties can do. :-)
https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground
Aaron HARPT
19,845 PointsHere is a codepen link: http://codepen.io/anon/pen/NxrObm Also, Here is the link to what I want the nav to look like: http://codepen.io/anon/pen/zrBmwo
Jonathan Grieve
Treehouse Moderator 91,252 PointsIt looks like there's not a more you want to do then.
My assumption was that you wanted the navigation shackled vertically under 660px
But in this case you'd simply target the container of your navigation go be your flex container and make sure the navigation is horizontal by doing
.nav{
display: flex;
flex-direction:row;
justify-content: flex-end;
}
You can also add styles for positioning and margin.
Aaron HARPT
19,845 PointsUsing those flexbox properties did not work. I did not try using the margin or positioning you mentioned. Does that change anything?
Jonathan Grieve
Treehouse Moderator 91,252 PointsI'm sorry my suggestions haven't worked for you yet.
I'm still working under the assumption you want a vertical navigation for viewports narrower than 660px. In which case you will want to change your media query to be a maximium width query
@media screen and (max-width: 660px) { }
The margin properties are just another way of placing the navigation precisely where you want them, but the real magic is in the Flexbox.
I selected the UL element in this codepen and made it a flex container.
I hope this is closer to what you wanted. http://codepen.io/anon/pen/KVMjNa
Aaron HARPT
19,845 PointsCan you post the code that you changed?
Jonathan Grieve
Treehouse Moderator 91,252 Pointson line 849, selecting the unordered list
ul {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
And on line 833
@media screen and (max-width: 660px) {
where I changed the media query from min width to max width. :-)
Aaron HARPT
19,845 PointsWhat rule triggers the nav going below the logo?