diff --git a/static/mobile.less b/static/mobile.less
index 30a83907..186f7f1c 100644
--- a/static/mobile.less
+++ b/static/mobile.less
@@ -17,24 +17,31 @@ label[for="nav-trigger"] {
   font-weight: 700;
   .border-radius;
   z-index: 99;
-  transition: background .25s;
+  transition: background @transition-speed;
 }
 label:hover{
   background: @border-color;
 }
 .nav-trigger:checked + label{
-    left: @sidebar-width + @gutter*2;
+  left: @sidebar-width + @gutter*2;
+  transition: left @transition-speed*2;
 }
 .nav-trigger ~ #everything #right {
 	width: 100%;
 }
 .nav-trigger:checked ~ #everything #right {
-  flex-shrink: 0;
-  width: auto;
-  position: fixed;
-  left: @sidebar-width;
-  overflow-x: hidden;
-  z-index: 50;
+  @media screen and (max-width: @breakpoint){
+    flex-shrink: 0;
+    width: auto;
+    position: fixed;
+    left: @sidebar-width;
+    overflow-x: hidden;
+    z-index: 50;
+  }
+}
+.nav-trigger:not(:checked) ~ #everything #left {
+  visibility: hidden;
+  transition: visibility @transition-speed;
 }
 .nav-trigger + label {
   .transition-left
diff --git a/static/sidebar.less b/static/sidebar.less
index d55c7ec7..70e3deed 100644
--- a/static/sidebar.less
+++ b/static/sidebar.less
@@ -10,11 +10,17 @@
     	color: white;
     	font-weight: 300;
   	}
-	@media screen and (min-width: @breakpoint) {
-      	display: block;
+	  @media screen and (min-width: @breakpoint) {
+      display: block;
     }
 }
 
+#everything #left{
+  @media screen and (min-width: @breakpoint){
+    display: none;
+  }
+}
+
 // ----- SOCIAL BUTTONS FOR MOBILE VIEW -----
 ul.social-side{
   margin: 0;
diff --git a/static/variables.less b/static/variables.less
index 050fcae3..3a606309 100644
--- a/static/variables.less
+++ b/static/variables.less
@@ -14,6 +14,7 @@
 @gutter: 15px;
 @breakpoint: 1000px;
 @sidebar-width: 250px;
+@transition-speed: .25s;
 
 /*----- TYPE -----*/
 @font-weight-heading: 500;