How to get Bootstrap's affixed navlist style?

Question

I've been playing around with Bootstrap for sometime. While I've always been able to get everything working. I've been considering it for an upcoming project which requires an affixed side-nav exactly like the one present in the Twitter Bootstrap doc.

I've even tried to include these classes to my element.

<ul class="nav nav-list affix-top">

Any bootstrap mavens here who could help me figure out what I'd need to add to get these up and working. Also, I've been unable to get the chevrons to display exactly as done over there, my chevrons always get mashed up together with the text.

Answer 1

Have you remembered to turn it on in JS?

They use:

$('#navbar').affix()

, but you'll need to change the selector to whatever your need.

Ah, now you've rephrased what you want!

They have another class on that called .bs-docs-sidenav

.bs-docs-sidenav {
    width: 228px;
    margin: 30px 0 0;
    padding: 0;
    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

They then add a class called active to the li, then specify the behaviour of that here:

.bs-docs-sidenav > .active > a {
    position: relative;
    z-index: 2;
    padding: 9px 15px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}

So in short, that isn't a built in function of bootstrap.