Адаптировал левое меню под телефоны

static/css/custom.css

@@ -31,23 +31,15 @@ body {
 
 /* Hide for mobile, show later */
 .sidebar {
-    display: none;
-}
-
-@media (min-width: 768px) {
-    .sidebar {
-        position: fixed;
-        top: 39px;
-        bottom: 0;
-        left: 0;
-        z-index: 1000;
-        display: block;
-        padding: 20px;
-        overflow-x: hidden;
-        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-        background-color: #303840;
-        border-right: 1px solid #eee;
-    }
+    background-color: #303840;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    position: fixed;
+    display: block;
+    top: 39px;
+    bottom: 0;
+    padding: 20px;
+    border-right: 1px solid #eee;
 }
 
 /* Sidebar navigation */
@@ -57,6 +49,9 @@ body {
     margin-left: -20px;
     border-top: 1px solid #576a7d;
 }
+@media (max-width: 767px){
+    .nav-sidebar{margin-right: -15px;}
+}
 
 .nav-sidebar > li > a {
     padding-right: 20px;
@@ -167,3 +162,46 @@ td.btn-group {
 .selectajax button.selectajax-btn{
     text-align: left;
 }
+
+
+/*
+ * Off Canvas
+ * --------------------------------------------------
+ */
+@media screen and (max-width: 767px) {
+  .row-offcanvas {
+    position: relative;
+    -webkit-transition: all .25s ease-out;
+       -moz-transition: all .25s ease-out;
+            transition: all .25s ease-out;
+  }
+
+  .row-offcanvas-left {
+    left: 0;
+  }
+
+  .row-offcanvas-left
+  .sidebar-offcanvas {
+    left: -50%; /* 6 columns */
+  }
+
+  .row-offcanvas-left.active {
+    left: 50%; /* 6 columns */
+  }
+
+  .sidebar-offcanvas {
+    position: absolute;
+    top: 0;
+    width: 50%; /* 6 columns */
+  }
+}
+
+button[data-toggle=offcanvas]{
+    position: absolute;
+    left: 0;
+    top: 194px;
+    z-index: 1;
+    height: 42px;
+    background-color: #44596b;
+    border: 0;
+}