diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index c1e251d961..63f23e1789 100644
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -22,7 +22,7 @@
 <script src="assets/Simple-Jekyll-Search-1.0.8/dest/jekyll-search.js"></script>
 <script src="assets/jekyll-table-of-contents/toc.js"></script>
 <script src="js/tabstate.js"></script>
-<script src="{{ "js/customscripts.js" }}"></script>
+<script src="js/customscripts.js"></script>
 
 <link rel="shortcut icon" href="{{ "images/favicon.ico"  }}" type="image/x-icon">
 <link rel="icon" href="{{ "images/favicon.ico"  }}" type="image/x-icon">
diff --git a/docs/js/customscripts.js b/docs/js/customscripts.js
index 35e53e155b..b1fca27328 100644
--- a/docs/js/customscripts.js
+++ b/docs/js/customscripts.js
@@ -1,16 +1,16 @@
-
-$('#mysidebar').height($(".nav").height());
-
-
 $( document ).ready(function() {
 
-    //this script says, if the height of the viewport is greater than 800px, then insert affix class, which makes the nav bar float in a fixed
-    // position as your scroll. if you have a lot of nav items, this height may not work for you.
+    $('#mysidebar').height($(".nav").height());
+
+    // this script says, if the height of the viewport is greater than 800px, then insert position-fixed class,
+    // which makes the nav bar float in a fixed position as your scroll. If you have a lot of nav items,
+    // this height may not work for you.
     var h = $(window).height();
     //console.log (h);
     if (h > 800) {
-        $( "#mysidebar" ).attr("class", "nav affix");
+        $( "#mysidebar" ).attr("class", "nav position-fixed");
     }
+
     // activate tooltips. although this is a bootstrap js function, it must be activated this way in your theme.
     $('[data-toggle="tooltip"]').tooltip({
         placement : 'top'