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