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

Aaron HARPT
Aaron HARPT
19,845 Points

Using 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
MOD
Jonathan Grieve
Treehouse Moderator 90,932 Points

Typically 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
Aaron HARPT
19,845 Points

I 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
Jonathan Grieve
Treehouse Moderator 90,932 Points

Hi 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
Jonathan Grieve
Treehouse Moderator 90,932 Points

Here'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
Aaron HARPT
19,845 Points

Here 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
Jonathan Grieve
Treehouse Moderator 90,932 Points

It 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
Aaron HARPT
19,845 Points

Using those flexbox properties did not work. I did not try using the margin or positioning you mentioned. Does that change anything?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,932 Points

I'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
Aaron HARPT
19,845 Points

Can you post the code that you changed?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,932 Points

on 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
Aaron HARPT
19,845 Points

What rule triggers the nav going below the logo?