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 Ruby Longe
Ruby Longe
3,895 Points

How to use affix in Bootstrap to create a sticky navigation bar (CSS preferred)

I'm currently trying to create a website so that the navigation bar is only visible once the header is out of site and then fixes itself to the top of the page. I have read various documentation and I understand that you must use affix to do this. However I don't really understand how to implement this: http://getbootstrap.com/javascript/#positioning-via-css into my code

 <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle-navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Ruby L.</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>  
        </div>

As you can see, I have tried adding some of the documentation into my navigation bar and I have posted some CSS that I thought might be relevant. I have tried playing around with it but to no avail. Any help would be highly appreciated! 

.jumbotron {
   min-height: 650px; 
}

.navbar-default {
    background-color: white;
    background-image: none;  
    border: none; 
}

.affix {
    position: fixed;
}

1 Answer

Christoph Hellmuth
Christoph Hellmuth
11,604 Points
Christoph Hellmuth
Christoph Hellmuth
11,604 Points

Hi Ruby, this is a little more complex. First you need the bootstrap Javascript file, affix.js and need to link it into your html.

  1. Version: Bootstrap uses data attributes to watch it and add an offset for example.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> ... </div>

OR

  1. Trough Javascript: Just add this code and change the #id of the element you want to affix.

$('#myAffix').affix({ offset: { top: 100, bottom: function () { return (this.bottom = $('.footer').outerHeight(true)) } } })

Christoph Hellmuth
Christoph Hellmuth
11,604 Points
Christoph Hellmuth
Christoph Hellmuth
11,604 Points
  1. Version: Bootstrap uses data attributes to watch it and add an offset for example.
            <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>
            ```
Ruby Longe
Ruby Longe
3,895 Points

Hi Christoph

Thanks for your answer although I don't really understand Javascript that much hence why I wanted to use the CSS version http://getbootstrap.com/javascript/#positioning-via-css. If you could explain or give a hint as to how to implement this in my own code then that would be great!