Twitter Bootstrap Scrollspy SideNav SideBar Not Working SOLUTION

If you’ve added in all the html code, and javascript calls and it’s still not working

            $('.bs-docs-sidenav').affix({
                offset: {
                    top: function () { return $window.width() <= 980 ? 90 : 10 }
                    , bottom: 270
                }
            });

    <div class="bs-docs-sidebar">
      <ul class="nav nav-list bs-docs-sidenav belowmast affix">
        <li><a href="#buy"><i class="icon-chevron-right"></i>&uarr;&nbsp;&nbsp;&nbsp; Home</a></li>
        <li><a href="#letscreate"><i class="icon-chevron-right"></i> Let's Create</a></li>
        <li><a href="#ourjournals"><i class="icon-chevron-right"></i> Our Journals</a></li>
        <li><a href="#yourideas"><i class="icon-chevron-right"></i> Your Ideas In KLINE</a></li>
        <li><a href="#gallery"><i class="icon-chevron-right"></i> Gallery</a></li>
        <li><a href="#components"><i class="icon-chevron-right"></i> Components</a></li>
      </ul>
    </div>

The answer could be simple!

Does your body tag include the required data attributes?

<body data-spy="scroll" data-target=".bs-docs-sidebar" >

Substitute .bs-docs-sidebar for whatever your scrollspy sidebar is called!

For an extra tip today, learn how to Add SMOOTH SCROLLING to your sidenav HERE!

Leave a Reply