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

JavaScript

Posted by Tiffany McAllister
Tiffany McAllister
25,806 Points

Bootstrap navigation at bottom of page

Hi everyone,

I'm working on a one-page website project with Bootstrap and I'm having a bit of difficulty getting it to do what I want.

On smaller screens, I want the navigation to be fixed at the top which is fine and I know how to do. On bigger screens I want the navigation bar to be at the bottom of the page but not fixed. I would like it to scroll with the page and once it gets to the top of the page I'd then like it to be fixed. I know this can be done with Bootstrap's Affix plugin, I just don't know how to make the navigation NOT fixed to the bottom of the page.

Any help would be very much appreciated. JavaScript is definitely not one of my stronger skills unfortunately.

Here is a link to the codepen: http://codepen.io/anon/pen/XbobWR

Tiffany McAllister
Tiffany McAllister
25,806 Points

Ok, scrap that. I managed to do it by setting the nav-fixed-bottom class position to absolute. Now to get the Affix plugin working... if anyone can help with that, that'd be great.

Tiffany McAllister
Tiffany McAllister
25,806 Points

I've updated my codepen here http://codepen.io/tiffmc/pen/LVMxqG

I've managed to get the bottom navbar to be fixed to the top once it reaches the top of the page, however, I'm not sure how to get it unstuck once I scroll back up?