diff --git a/_layouts/docs.html b/_layouts/docs.html
index 0860b49ee5..af1663b9a1 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -4,14 +4,38 @@ layout: default
 {% include home.html %}
 {% include doc-top-nav.html %}
 
+<style>
+#sidebar-tab {
+  border: 1px solid rgba(0,0,0,0.10);
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background-color: rgba(0,0,0,0.05);
+  padding: 10px 5px 10px 5px;
+  margin-left: -15px;
+  margin-top: -2px;
+  margin-right: 10px;
+  font-size: 1rem;
+  color: black;
+}
+
+#sidebar-container {
+  float: left;
+  padding:0px;
+  background-color: #fff;
+  border-right: 1px solid rgba(0, 0, 0, .15);
+}
+</style>
 <div class="container docs">
   <div class="row">
     <div class="col-md-11 nofloat center-block">
       <div class="row">
-          <div class="col-sm-3">
+          <div id="sidebar-container" class="col-sm-3">
             {% include doc-side-nav.html %}
           </div>
-          <div class="col-sm-9 {{ page.type }}">
+          <div class="col-xs-1">
+            <span id="sidebar-tab" class="pull-left glyphicon glyphicon-chevron-left"></span>
+          </div>
+          <div id="content-container" class="col-sm-9 {{ page.type }}">
             <div id="toc" class=""></div>
             <h1>{{page.title}}</h1>
             {{ content }}
@@ -22,3 +46,4 @@ layout: default
 </div>
 
 <script src="{{home}}/js/copyToClipboard.js"></script>
+<script src="{{home}}/js/sidemenu.js"></script>
\ No newline at end of file
diff --git a/js/sidemenu.js b/js/sidemenu.js
new file mode 100644
index 0000000000..9e579dfb20
--- /dev/null
+++ b/js/sidemenu.js
@@ -0,0 +1,70 @@
+(function($) {
+  $(document).ready( function() {
+    var sidebarOpen = true;
+    var sidebar = $("#sidebar-container");
+    var content = $("#content-container");
+    var width = $(document). width();
+
+    function setSidebar() {
+      // set sidebar height, breakpoint at iPad in landscape
+      if (screen.height > 768)
+        sidebar.height($('footer').position().top + 50);
+    
+      // 992 is the default breakpoint set in Bootstrap 3 for col-md
+      if (width < 992) {
+        sidebar.toggle();
+        sidebar.sidebarOpen = !sidebar.sidebarOpen;
+      }
+
+    /*
+      // 1756 is a judgement call on the breakpoint for when the sidebar needs a col-lg-3 and not col-lg-12
+      if (width < 1756) {
+        if (sidebar.hasClass("col-lg-2"))
+          sidebar.removeClass("col-lg-2");
+        if (!sidebar.hasClass("col-lg-3"))
+          sidebar.addClass("col-lg-3");
+
+        if (content.hasClass("col-lg-10"))
+          content.removeClass("col-lg-10");
+        if (!content.hasClass("col-lg-9"))
+          content.addClass("col-lg-9");
+      }
+      else {
+        if (sidebar.hasClass("col-lg-3"))
+          sidebar.removeClass("col-lg-3");
+        if (!sidebar.hasClass("col-lg-2"))
+          sidebar.addClass("col-lg-2");
+
+        if (content.hasClass("col-lg-9"))
+          content.removeClass("col-lg-9");
+        if (!content.hasClass("col-lg-10"))
+          content.addClass("col-lg-10");
+      }
+    */
+    }
+
+    $(document).on('click', '#sidebar-tab', function() {
+      $(this).toggleClass('glyphicon-chevron-right');
+      $(this).toggleClass('glyphicon-chevron-left');
+      sidebar.toggle(250);
+      sidebarOpen = !sidebarOpen;
+    });
+
+    /* toggle category tree */
+    $(document).on('click', '.tree-toggle', function () {
+        $(this).children('i.fa').toggleClass('fa-caret-right');
+        $(this).children('i.fa').toggleClass('fa-caret-down');
+        $(this).parent().children('ul.tree').toggle(200);
+    });
+
+    function onWindowResize() {
+    	setSidebar();
+    }
+
+    // initialize
+    window.addEventListener('resize', onWindowResize, false);
+    window.onload = function() {
+      setSidebar();
+    }
+  });
+}(jQuery));