diff --git a/seahub/group/templates/group/group_base.html b/seahub/group/templates/group/group_base.html
index 6a2bff55eb..147ec6dbf8 100644
--- a/seahub/group/templates/group/group_base.html
+++ b/seahub/group/templates/group/group_base.html
@@ -7,6 +7,7 @@
 {% block main_content %}
 <div class="row">
     <div class="side-tabnav side-nav col-md-3">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
     {% block left_panel %}
         <div class="hd w100 ovhd">
             <h3>
diff --git a/seahub/help/templates/help/base.html b/seahub/help/templates/help/base.html
index 8388f9ca19..989b480b26 100644
--- a/seahub/help/templates/help/base.html
+++ b/seahub/help/templates/help/base.html
@@ -4,6 +4,7 @@
 {% block main_content %}
 <div class="row">
     <div class="side-textnav col-md-3 side-nav">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         <h3 class="hd">{% trans "Desktop Client and Syncing" %}</h3>
         <ul class="side-textnav-tabs">
             <li class="tab"><a href="{{ SITE_ROOT }}help/install/">{% trans "Install and sync Files" %}</a></li>
diff --git a/seahub/institutions/templates/institutions/base.html b/seahub/institutions/templates/institutions/base.html
index 80fed73282..44a01c57ae 100644
--- a/seahub/institutions/templates/institutions/base.html
+++ b/seahub/institutions/templates/institutions/base.html
@@ -8,6 +8,7 @@
 {% block main_content %}
 <div class="row">
     <div class="side-nav side-tabnav col-md-3">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         {% block left_panel %}
         <h3 class="hd">{{ request.user.institution.name }}</h3>
         <ul class="side-tabnav-tabs">
diff --git a/seahub/profile/templates/profile/set_profile.html b/seahub/profile/templates/profile/set_profile.html
index 70c2fcba25..72993ed0e4 100644
--- a/seahub/profile/templates/profile/set_profile.html
+++ b/seahub/profile/templates/profile/set_profile.html
@@ -8,6 +8,7 @@
 <div class="row">
 
 <div class="side-nav side-textnav col-md-3" id="side-nav" role="navigation">
+    <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
     <ul class="side-textnav-tabs">
         <li class="tab"><a href="#user-basic-info">{% trans "Profile" %}</a></li>
         <li class="tab"><a href="#lang-setting">{% trans "Language" %}</a></li>
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index af7950215c..5a111f07e5 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -42,6 +42,7 @@
                     <img src="{{ MEDIA_URL }}{{ logo_path }}" title="Seafile" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
                     {% endif %}
                 </a>
+                <button class="sf2-icon-list-view side-nav-toggle hidden-md-up hide" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></button>
 
                 {% block header_right %}
                 {% if request.user.is_authenticated %}
@@ -196,6 +197,19 @@ $('#info-bar .close').click(function() {
     });
 })();
 {% endif %}
+
+if ($('.side-nav').length) {
+    $('#logo').addClass('hidden-sm-down');
+    $('#js-toggle-side-nav').removeClass('hide');
+}
+$('#js-toggle-side-nav').click(function() {
+    $('.side-nav').css({'left': 0});
+    return false;
+});
+$('.js-close-side-nav').click(function() {
+    $('.side-nav').css({'left': '-300px'});
+    return false;
+});
 </script>
 {% block extra_script %}{% endblock %}
 </body>
diff --git a/seahub/templates/home_base.html b/seahub/templates/home_base.html
index 5fd4f09839..00fcd23100 100644
--- a/seahub/templates/home_base.html
+++ b/seahub/templates/home_base.html
@@ -4,6 +4,7 @@
 {% block main_content %}
 <div class="row">
     <div id="side-nav" class="side-nav side-tabnav col-md-3" >
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         {% block left_panel %}
         <h3 class="hd">{% trans "Files" %}</h3>
         <ul class="side-tabnav-tabs">
diff --git a/seahub/templates/js/sysadmin-templates.html b/seahub/templates/js/sysadmin-templates.html
index 1064e9b87e..7570013fd6 100644
--- a/seahub/templates/js/sysadmin-templates.html
+++ b/seahub/templates/js/sysadmin-templates.html
@@ -1,6 +1,7 @@
 {% load avatar_tags i18n %}
 
 <script type="text/template" id="side-nav-tmpl">
+    <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
     <h3 class="hd">{% trans "System Admin" %}</h3>
     <ul class="side-tabnav-tabs">
         <li class="tab<% if (cur_tab == 'dashboard') { %> tab-cur<% } %>">
diff --git a/seahub/templates/sysadmin/base.html b/seahub/templates/sysadmin/base.html
index 6f295b0cb6..46d59a8166 100644
--- a/seahub/templates/sysadmin/base.html
+++ b/seahub/templates/sysadmin/base.html
@@ -8,6 +8,7 @@
 {% block main_content %}
 <div class="row">
     <div id="side-nav" class="side-nav side-tabnav col-md-3">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         {% block left_panel %}
         <h3 class="hd">{% trans "System Admin" %}</h3>
         <ul class="side-tabnav-tabs">
diff --git a/seahub/templates/sysadmin/sysadmin_backbone.html b/seahub/templates/sysadmin/sysadmin_backbone.html
index b87332534c..50ae39a63d 100644
--- a/seahub/templates/sysadmin/sysadmin_backbone.html
+++ b/seahub/templates/sysadmin/sysadmin_backbone.html
@@ -37,13 +37,14 @@
         <div id="header" role="banner" class="navbar navbar-fixed-top">
             <div id="header-inner">
                 {% block notice_panel %}{% endblock %}
-                <a href="{{ SITE_ROOT }}" id="logo" class="fleft">
+                <a href="{{ SITE_ROOT }}" id="logo" class="hidden-sm-down fleft">
                     {% if seacloud_mode %}
                     <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
                     {% else %}
                     <img src="{{ MEDIA_URL }}{{ logo_path }}" title="Seafile" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
                     {% endif %}
                 </a>
+                <button class="sf2-icon-list-view side-nav-toggle hidden-md-up" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav"     aria-label="{% trans "Side Nav Menu" %}"></button>
 
                 <div id="account" class="fright">
                     <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
@@ -55,7 +56,7 @@
 
         <div id="main" class="clear container-fluid top-padding">
             <div class="row">
-                <div class="side-nav side-tabnav col-md-3 hide" id="side-nav" role="navigation"></div>
+                <div class="side-nav side-tabnav col-md-3" id="side-nav" role="navigation"></div>
                 <div id="right-panel" class="col-md-9 col-md-offset-3">
                     {% block right_panel %}{% endblock %}
                 </div>
diff --git a/static/scripts/sysadmin-app/views/side-nav.js b/static/scripts/sysadmin-app/views/side-nav.js
index 6eb6888ca4..e0441b2e77 100644
--- a/static/scripts/sysadmin-app/views/side-nav.js
+++ b/static/scripts/sysadmin-app/views/side-nav.js
@@ -17,7 +17,17 @@ define([
                 'cur_tab': this.default_cur_tab
             };
             this.render();
-            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() {
@@ -33,12 +43,34 @@ define([
             this.render();
         },
 
+        show: function() {
+            this.$el.css({ 'left':'0px' });
+        },
+
+        hide: function() {
+            this.$el.css({ 'left':'-300px' });
+        },
+
         events: {
+            'click .js-close-side-nav': 'closeNav',
+            'click li a': 'visitLink',
             'submit #libs-search-form': 'searchLibs', // for 'all' libs
             'submit #trash-libs-search-form': 'searchTrashLibs',
             'submit #groups-search-form': 'searchGroups'
         },
 
+        closeNav: function() {
+            this.hide();
+            return false;
+        },
+
+        visitLink: function(e) {
+            if ($(window).width() < 768) {
+                this.hide();
+            }
+            return true;
+        },
+
         // search libs by repo_name
         searchLibs: function() {
             var $form = this.$('#libs-search-form');