Bootstrap 3 sidebar nav fixed – responsive affix full example

Responsive affix in sidebar nav

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.

 

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.  

 

You Might Interested In