Bootstrap responsive affixed menu

Question

I want to have an affixed menu as in the bootstrap doc which is not affixed on mobile phones, just as on the bootstrap doc. I've following code:

<div class="container">
  <div class="row">
    <div class="span3 bs-docs-sidebar ">
      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix">
        <li><a href="#a"><i class="icon-home"></i> A</a></li>
        <li><a href="#b"><i class="icon-chevron-right"></i> B</a></li>
        <li><a href="#c"><i class="icon-chevron-right"></i> C</a></li>
      </ul>
    </div>

    <div class="span9">
      ...
    </div>
  </div>
</div>

I have tried it with and without the data-spy="affix" for the ul and I have also tried $(function(){ $('.bs-docs-sidenav').affix() }).

But the menu is always fixed so I can't read the text on mobile phones.

Answer 1

I just found the answer to my question on the bootstraps doc.css file which they have on their page. You have to add following css (maybe you have to change the class if you are using the affix on a different class)

/* Tablet
------------------------- */
@media (max-width: 767px) {
  .bs-docs-sidenav.affix {
    position: static;
    width: auto;
    top: 0;
  }
}

I also just added the class affix to the bs-docs-sidenav element and didn't use any JavaScript (i.e. the data-spy)