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


Gabriel Ward
Gabriel Ward
20,222 Points

Fixed position nav and flexbox

I'm playing around with flexbox and have been using the great resources on the CSS-tricks tutorial.

I've taken the header, aside, footer layout from the flexbox tutorial and then added the navigation bar styled with flexbox. Then I've fixed the positioning of the navigation bar. This is where I'm a bit stuck. When the nav bar is fixed, the header, aside, footer, layout moves up and doesn't remain below the nav bar, as it is when the nav bar isn't in a fixed position. I've been playing around with margins trying to solve the problem. The best one I've come up with so far is to add a margin-top to the .wrapper. Any suggestions/tips would be greatly appreciated. I want to have the header, footer, aside to remain below the nav bar when the nav bar is fixed.

Here's the two scenarios on codepen.

This is where the navigation isn't fixed in place: http://codepen.io/GabeWard/pen/ogoLom

This is where the navigation is fixed in place and the header, aside, footer has moved: http://codepen.io/GabeWard/pen/QwOEad

1 Answer

Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi Gabriel, this will serve? http://codepen.io/anon/pen/yyPzMB

What I did:

  • Added "top: 0;" and "z-index: 99;" to the navigation class;
  • Added "position: relative;" and "top: 112px;" to the wrapper class;

Bonus -

  • Added body {margin: 0;}
  • Added a block just to see the roll effect

PS: I'm not an expert, but I liked your question since this is something that I was wanting to learn.