Better TOC on mobile

scss/partials/_media.scss

@@ -55,52 +55,3 @@
         width:100%;
     }
 }
-
-
-@media screen and (max-width: 768px) {
-    #table-of-contents {
-        display: none;
-        width: 60%;
-    }
-
-    #table-of-contents h2 a {
-        display: block;
-    }
-
-    #table-of-contents:target {
-        display: block;
-    }
-
-    #copyright, #postamble {
-        display: none;
-    }
-
-    #toggle-sidebar {
-        display: block;
-        margin-bottom: 1.6em;
-        padding: 0.6em;
-        text-align: center;
-    }
-
-    #toggle-sidebar h2 {
-        background-color:#2980B9;
-        width:100%;
-        height:50px;
-        left:0;
-        top:0;
-        color: white;
-        font-size: 100%;
-        line-height: 50px;
-        position:fixed;
-        margin: 0;
-        padding: 0;
-        opacity:0.7;
-    }
-
-    #table-of-contents .close-sidebar {
-        color: rgba(255, 255, 255, 0.3);
-        display: inline-block;
-        margin: 0px 10px 0px 45px;
-        padding: 10px;
-    }
-}

scss/partials/_nagivation.scss

@@ -1,7 +1,7 @@
 #org-div-home-and-up {
     position: absolute;
     right: 0;
-    z-index: 10;
+    z-index: 100;
     padding: 10px;
 
     // Large Screens
@@ -10,4 +10,14 @@
         width: $content-max-width+$toc-width;
         text-align: right;
     }
+
+    // Small screens
+    @media screen and (max-width: 768px) {
+        position: fixed;
+        padding: 1em;
+        color: $color-primary-background;
+        a {
+          color: $color-text-invert;
+        }
+    }
 }

scss/partials/_toc.scss

@@ -14,7 +14,7 @@
         color: $color-text-invert;
         background-color: $color-primary;
         text-align: center;
-        padding: 0.8em;
+        padding: 1em;
         display: block;
         font-size: 100%;
         z-index: 200;
@@ -70,6 +70,26 @@
     .tag {
         display: none;
     }
+
+    @media screen and (max-width: 768px) {
+        display: none;
+        width: 60%;
+        box-shadow: -25px 0px 10px 32px $black;
+
+        &:target {
+            display: block;
+        }
+
+        .close-sidebar {
+            color: $color-text-invert;
+            display: block;
+            margin-left: 10px;
+            float: right;
+            &:hover {
+                background-color: $color-primary;
+            }
+        }
+    }
 }
 
 
@@ -209,3 +229,31 @@ li ul li a{
     color:#b3b3b3;
     font-weight:normal;
 }
+
+
+@media screen and (max-width: 768px) {
+    #copyright, #postamble {
+        display: none;
+    }
+
+    #toggle-sidebar {
+        display: block;
+        margin-bottom: 1.6em;
+        padding: 1.0em;
+        text-align: center;
+
+        h2 {
+            position:fixed;
+            width:100%;
+            left:0;
+            top:0;
+            color: $color-text-invert;
+            background-color: $color-primary;
+            text-align: center;
+            padding: 1em;
+            display: block;
+            font-size: 100%;
+            z-index: 20;
+        }
+    }
+}