diff --git a/media/css/seahub.css b/media/css/seahub.css
index b264ed3a58..8b50c8d98c 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -675,6 +675,7 @@ textarea:-moz-placeholder {/* for FF */
         background: #f8f8f8;
         width:300px;
         position:fixed;
+        left:-300px;
         top:0;
         bottom:0;
         z-index:1;
@@ -684,6 +685,11 @@ textarea:-moz-placeholder {/* for FF */
         border-right:1px solid #eee;
     }
 }
+.side-tabnav {
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
 .side-tabnav .hd {
     margin-bottom:0.5em;
 }
diff --git a/static/scripts/app/views/side-nav.js b/static/scripts/app/views/side-nav.js
index 6f1a491f8a..221f645fde 100644
--- a/static/scripts/app/views/side-nav.js
+++ b/static/scripts/app/views/side-nav.js
@@ -28,14 +28,17 @@ define([
                 'can_add_repo': app.pageOptions.can_add_repo,
             };
             this.render();
-            if ($(window).width() >= 768) {
-                this.$el.show();
-            }
+            this.$el.show();
             var _this = this;
             $('#js-toggle-side-nav').click(function() {
                 _this.show();
                 return false;
             });
+            $(window).resize(function() {
+                if ($(window).width() >= 768) {
+                    _this.show();
+                }
+            });
         },
 
         render: function() {
@@ -151,11 +154,15 @@ define([
         },
 
         show: function() {
-            this.$el.show();
+            this.$el.css({ 'left':'0px' });
+        },
+
+        hide: function() {
+            this.$el.css({ 'left':'-300px' });
         },
 
         closeNav: function() {
-            this.$el.hide();
+            this.hide();
             return false;
         },
 
@@ -163,7 +170,7 @@ define([
             if ($(window).width() < 768) {
                 if ($(event.target).attr('href') !== "#") {
                     // except for groups toggle link
-                    this.$el.hide();
+                    this.hide();
                 }
             }
             return true;