diff --git a/_includes/topnav.html b/_includes/topnav.html
index 8748605..aa5f072 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -12,6 +12,8 @@
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav navbar-right">
+                <!-- toggle sidebar button -->
+                <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
                 <!-- entries without drop-downs appear here -->
                 {% for entry in site.data.topnav.topnav %}
                 {% for item in entry.items %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 5c62251..80ffc2b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -38,7 +38,17 @@
             $('[data-toggle="tooltip"]').tooltip()
         })
     </script>
-
+    <script>
+        $(document).ready(function() {
+            $("#tg-sb-link").click(function() {
+                $("#tg-sb-sidebar").toggle();
+                $("#tg-sb-content").toggleClass('col-md-9');
+                $("#tg-sb-content").toggleClass('col-md-12');
+                $("#tg-sb-icon").toggleClass('fa-toggle-on');
+                $("#tg-sb-icon").toggleClass('fa-toggle-off');
+            });
+        });
+    </script>
     {% if page.datatable == true %}
     <!-- Include the standard DataTables bits -->
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
@@ -69,11 +79,11 @@
     <!-- Content Row -->
     <div class="row">
         <!-- Sidebar Column -->
-        <div class="col-md-3">
+        <div class="col-md-3" id="tg-sb-sidebar">
 
           {% include sidebar.html %}
     <!-- Content Column -->
-    <div class="col-md-9">
+    <div class="col-md-9" id="tg-sb-content">
         {{content}}
     </div>
     <!-- /.row -->