Bootstrap 3 sidebar nav fixed – responsive affix full example

This article is full example of responsive Affix in Twitter Bootstrap 3, which is placed in sidebar of your Bootstrap project as a navigation menu on the same page. You can implement code to:

Place an affix in sidebar which maintains responsiveness and expands its width to full available size of parent container even if you resize the window or click any nav menu.
Make affix invisible on small screen sizes (<768px) using Bootstrap’s ‘hiden-‘ classes.
Smoothly scrolls the page whenever you click any nav link using jQuery’s ‘animate()‘ function.
Apply a different class on currently active navigation menu and switch classes on manual scrolling.

Responsive affix in sidebar nav

Bootstrap 3 sidebar nav fixed – responsive affix full example

The default affix provided in Bootstrap doesn’t expands to full available width of sidebar if you use fluid width or ‘container-fluid’ class (picture below). But our code will overcome this issue.

Bootstrap affix on fluid width

Furthermore for simplicity we are using fixed navbar at top of page and content below it. You can modify the code as per your specific requirement. 

HTML: Below is the HTML of our page.

Here you can see we have set ‘data-offset-top‘  to zero as we don’t have any element except navbar before affix and used ‘active‘ class to first nav link in sidebar affix. Since we have fixed navbar at top to we need body padding.

CSS:

Now the menu will start normally without any smooth scrolling and fixed positioning. To achieve what we have mentioned in starting of article we need to add some jQuery code. So add the following script anywhere after already added jQuery library (as required by Bootstrap):

The JS code is commented along with to let us understand what are the script performing. The first function is responsible to manage affix width and classes while resizing and scrolling where as the second function just utilize smooth scrolling whenever someone click to any on page affix navigation menu item in left sidebar.

This all is the full working example code for responsive affix with smooth scrolling in sidebar as fixed nav in your Bootstrap 3 project. If you need any modification then comment and let me know.  

 

Like this Post? Share
  • DS

    Hello – what adjustments can be made so that the list moves when the #footer scrolls to bottom of sidebar

    • Amit Sonkhiya

      Hello DS,

      I’m sorry as I’m unable to get you. Footer is generally stays at bottom. Can you explain a bit more?

  • Schmid Beda

    Great!

    I just have one issue.

    When you hit on a list group
    item in sidebar, it scrolls correctly to the location, but actaully it
    hides part of it exactly under the Headere Navigation.

    It seems like the anchor is set to low (under post titlte) but, it’s not the case.

    Wat settings can be changed to adjust the “margin-top” a certain element will have, once we “navigate” to it ?

    Hope
    you can understand .. Title of post is hiding under header menu,
    instead of nicely scroll to the correct location, it scrolls to far “up”
    on screen…

  • Schmid Beda

    also, I see that only now. the active class (add remove) seems not to work. Item one is always “active”

  • Schmid Beda

    not sure why, but this stuff works also without any JS at all.
    I think somethings weird here 🙂

    • Amit Sonkhiya

      HI,

      For first issue regarding hiding behind header: You can adjust body { padding-top: 70px; } and offset given in very first line in jquery document ready function.

      For second issue regarding active class: make sure your jquery is being called.

      For third issue working without jQuery: The default affix provided in Bootstrap doesn’t expands to full available width of sidebar if you use fluid width (not fixed one). You can also check by resizing & scrolling browser window.

      • Schmid Beda

        Well, I solved issue “hiding behind header” with this:

        http://stackoverflow.com/questions/30746706/bootstrap-affix-content-scrolls-to-far-up-on-screen/30747416#30747416

        Issue with JS seems a issue with my way to add JS.

        I use a visual composer to edit content, and it lets you add JS.

        Seems, this JS does not apply somehow, no idea why

        It resizes though, as this is a Bootstrap feature as I see in their DOC

        Partially solved. The active class is anyway more of a scroll spy feature and Bootstrap actually seems to apply it to the affix too, but they do not state how.

        • Amit Sonkhiya

          Great, you have solve major issues. They didn’t mention but hope you can deal with that & still if you persist issue, we can assist you 🙂