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

CSS

Posted by Kieran Corcoran
Kieran Corcoran
11,188 Points

Sticky nav menu and footer? Thanks

Hi,

Does anyone know where I can find a more advanced video on creating a sticky nav menu and footer? I have just finished the basic css course where we used position fixed, but I would like a more advanced/suitable option.

Many Thanks

Jason Milfred
Jason Milfred
5,968 Points

This is a nice sticky footer solution. http://mystrd.at/modern-clean-css-sticky-footer/

Jason Milfred
Jason Milfred
5,968 Points

The article mentions that you could just use flexbox. It just depends on how concerned you are about browser support.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Flexbox is fine, the only issues come with IE caniuse

4 Answers

ve
ve
5,048 Points
ve
ve
5,048 Points

I don't know if there's a course on here that deals with this subject, but position: sticky is actually existing on css, even though it's a bit (really just a bit) more complex than position: fixed. You can find more about it here:

https://developer.mozilla.org/en/docs/Web/CSS/position

But keep in mind that its compatibility with browsers is not yet fully tested and/or supported, see mdn for more infos :)

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

What problems are you running into that position fixed has caused? Here is a great code snippet on CSS Tricks

Kieran Corcoran
Kieran Corcoran
11,188 Points

Hi Jacob,

I have a top nav with position fixed, under that I have a full width banner.

Position fixed take's the nav out the normal flow, which then pull's part of the banner under the sticky nav. I resolve this by adding padding-top to the body, forcing the banner back into the correct position.

However, on my other pages I do not have a banner, and the content on these pages also get pulled under the sticky nav. Add extra padding-top to the body will fix the issue, but then I have an issue with the banner being pushed to far down, on the first page.

Should I add an extra class on these pages and add padding-top this way? I am correct in thinking it will not impact the banner on the first page.

Sorry, I do hope the above make's some kind of sense. I Just want to make sure I am doing the correct thing.

Many Thanks

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

It's fine, remember there is a bunch of way you can do this, there isn't just one way.

  1. Are you comfortable with jQuery? there are several plugins that work rather nicely on scroll so when you move down the page the nav or header will stick to the top of the viewport.

  2. You can also have a div wrapper over the banner and nav and display that block then have your nave and banner displayed fixed. SO your wrapper stays in the normal flow of the page and the nested elements are free to be fixed. Also it's just style but your nav's should be uniform on all pages to create a sense of collection and to be able to tie each page to each other. That's just me, but I'm sure you know you can do whatever you want.

Kieran Corcoran
Kieran Corcoran
11,188 Points

Jacob, thank you for the advice, it is much appreciated.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Let us know if you need any more help.

Kieran Corcoran
Kieran Corcoran
11,188 Points
Kieran Corcoran
Kieran Corcoran
11,188 Points

Thank you everyone for your help!