diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css
index 57b1e9a7cb..efc80af7d1 100644
--- a/mayan/apps/appearance/static/appearance/css/base.css
+++ b/mayan/apps/appearance/static/appearance/css/base.css
@@ -435,23 +435,56 @@ a i {
 /* Hide for mobile, show later */
 
 #menu-main {
-    display: none;
+    display: block;
     background-color: #2c3e50;
     border-right: 1px solid #18bc9c;
     bottom: 0;
-    left: 0;
+    left: -210px;
     overflow-x: hidden;
     overflow-y: auto;
     padding-top: 10px;
     position: fixed;
     top: 51px;
+    transition: left 0.3s;
     width: 210px;
     z-index: 1000;
+
+}
+
+#menu-main-button-close {
+    border-radius: 0;
+    border-top: 2px solid #1c2733;
+    border-bottom: 2px solid #1c2733;
+    bottom: 0;
+    display: block;
+    height: 40px;
+    position: relative;
+    text-align: center;
+    width: 209px;
+}
+
+#main-menu-button-open {
+    background-color: transparent;
+    border: 0;
+    border-right: 1px solid #95a5a6;
+    display: block;
+    padding: 6px 20px 0px 10px;
+    margin: 0 10px 0 -15px;
 }
 
 @media (min-width: 768px) {
     #menu-main {
         display: block;
+        left: 0;
+    }
+
+    #menu-main-button-close {
+        display: none;
+    }
+
+    #main-menu-button-open {
+        display: none;
+
     }
 
     .navbar-brand {
@@ -460,6 +493,11 @@ a i {
     }
 }
 
+.menu-main-opened {
+    display: block !important;
+    left: 0 !important;
+}
+
 .main .page-header {
   margin-top: 0;
 }
diff --git a/mayan/apps/appearance/static/appearance/js/mayan_app.js b/mayan/apps/appearance/static/appearance/js/mayan_app.js
index ed8515162f..3bd4477fc1 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_app.js
+++ b/mayan/apps/appearance/static/appearance/js/mayan_app.js
@@ -305,6 +305,16 @@ class MayanApp {
                 $('.navbar-collapse').collapse('hide');
             }
         });
+
+        // Small screen main menu toggle to open
+        $('body').on('click', '#main-menu-button-open', function (event) {
+            $('#menu-main').addClass('menu-main-opened');
+        });
+
+        // Small screen main menu toggle to close
+        $('body').on('click', '#menu-main-button-close', function (event) {
+            $('#menu-main').removeClass('menu-main-opened');
+        });
     }
 
     setupNewWindowAnchor () {
diff --git a/mayan/apps/appearance/templates/appearance/calculate_form_title.html b/mayan/apps/appearance/templates/appearance/calculate_form_title.html
index 6c96b8c40a..6a3fd5e6ff 100644
--- a/mayan/apps/appearance/templates/appearance/calculate_form_title.html
+++ b/mayan/apps/appearance/templates/appearance/calculate_form_title.html
@@ -5,13 +5,31 @@
 {% common_calculate_title as result %}
 
 {% if not non_html_title %}
-    <h3 title='{{ result.title_full }}'>
+    <div style="display: flex;">
+        <button id="main-menu-button-open">
+            <span class="sr-only">{% trans 'Open main menu' %}</span>
+            <i aria-hidden="true" data-hidden="true" class="fa fa-bars"></i>
+        </button>
 {% endif %}
-    {{ result.title }}
+
 {% if not non_html_title %}
-    </h3>
-    {% if subtitle %}
-        <small>{{ subtitle }}</small>
-    {% endif %}
+        <div>
+            <h3 id="content-title" title='{{ result.title_full }}'>
+{% endif %}
+
+                {{ result.title }}
+
+{% if not non_html_title %}
+            </h3>
+            {% if subtitle %}
+                <p>
+                    <small>{{ subtitle }}</small>
+                </p>
+            {% endif %}
+{% endif %}
+
+{% if not non_html_title %}
+        </div>
+    </div>
     <hr/>
 {% endif %}
diff --git a/mayan/apps/appearance/templates/appearance/menu_main.html b/mayan/apps/appearance/templates/appearance/menu_main.html
index 836902186b..0643ed9986 100644
--- a/mayan/apps/appearance/templates/appearance/menu_main.html
+++ b/mayan/apps/appearance/templates/appearance/menu_main.html
@@ -5,64 +5,71 @@
 {% load smart_settings_tags %}
 
 {% spaceless %}
-<div class="panel-group" id="accordion-sidebar" role="tablist" aria-multiselectable="true">
-    {% navigation_resolve_menu name='main' as main_menus_results %}
-    {% for main_menu_results in main_menus_results %}
-        {% for link_group in main_menu_results.link_groups %}
-            {% for link in link_group.links %}
-                {% with 'active' as li_class_active %}
-                {% with ' ' as link_classes %}
-                    {% if link|common_get_type == "<class 'mayan.apps.navigation.classes.Menu'>" %}
-                        <div class="panel panel-default">
-                            <div class="panel-heading" role="tab" id="headingOne">
-                                <h4 class="panel-title">
-                                    <a class="non-ajax collapsed" role="button" data-toggle="collapse" data-parent="#accordion-sidebar" href="#accordion-body-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapseOne">
-                                        <div class="pull-left">
-                                            {% if link.icon %}
-                                            <i class="hidden-xs hidden-sm hidden-md {{ link.icon }}"></i>
-                                            {% endif %}
-                                            {% if link.icon_class %}{{ link.icon_class.render }}{% endif %}
-                                            {{ link.label }}
-                                        </div>
-                                        <div class="accordion-indicator pull-right"><span class="caret"></span></div>
-                                        <div class="clearfix"></div>
-                                    </a>
-                                </h4>
-                            </div>
-                            <div id="accordion-body-{{ forloop.counter }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
-                                <div class="panel-body">
-                                    <ul class="list-unstyled">
-                                        {% navigation_resolve_menu name=link.name as sub_menus_results %}
-                                        {% for sub_menu_results in sub_menus_results %}
-                                            {% for link_group in sub_menu_results.link_groups %}
-                                                {% with '' as link_class_active %}
-                                                {% with 'a-main-menu-accordion-link' as link_classes %}
-                                                {% with 'true' as as_li %}
-                                                {% with link_group.links as object_navigation_links %}
-                                                    {% include 'navigation/generic_navigation.html' %}
-                                                {% endwith %}
-                                                {% endwith %}
-                                                {% endwith %}
-                                                {% endwith %}
+    <div class="panel-group" id="accordion-sidebar" role="tablist" aria-multiselectable="true">
+        <div class="panel-heading" role="tab" id="menu-main-button-close">
+            <h4 class="panel-title">
+                <a class="disabled" href="">
+                    <i class="fa fa-angle-double-left"></i>
+                </a>
+            </h4>
+        </div>
+        {% navigation_resolve_menu name='main' as main_menus_results %}
+        {% for main_menu_results in main_menus_results %}
+            {% for link_group in main_menu_results.link_groups %}
+                {% for link in link_group.links %}
+                    {% with 'active' as li_class_active %}
+                    {% with ' ' as link_classes %}
+                        {% if link|common_get_type == "<class 'mayan.apps.navigation.classes.Menu'>" %}
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="headingOne">
+                                    <h4 class="panel-title">
+                                        <a class="non-ajax collapsed" role="button" data-toggle="collapse" data-parent="#accordion-sidebar" href="#accordion-body-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapseOne">
+                                            <div class="pull-left">
+                                                {% if link.icon %}
+                                                <i class="hidden-xs hidden-sm hidden-md {{ link.icon }}"></i>
+                                                {% endif %}
+                                                {% if link.icon_class %}{{ link.icon_class.render }}{% endif %}
+                                                {{ link.label }}
+                                            </div>
+                                            <div class="accordion-indicator pull-right"><span class="caret"></span></div>
+                                            <div class="clearfix"></div>
+                                        </a>
+                                    </h4>
+                                </div>
+                                <div id="accordion-body-{{ forloop.counter }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+                                    <div class="panel-body">
+                                        <ul class="list-unstyled">
+                                            {% navigation_resolve_menu name=link.name as sub_menus_results %}
+                                            {% for sub_menu_results in sub_menus_results %}
+                                                {% for link_group in sub_menu_results.link_groups %}
+                                                    {% with '' as link_class_active %}
+                                                    {% with 'a-main-menu-accordion-link' as link_classes %}
+                                                    {% with 'true' as as_li %}
+                                                    {% with link_group.links as object_navigation_links %}
+                                                        {% include 'navigation/generic_navigation.html' %}
+                                                    {% endwith %}
+                                                    {% endwith %}
+                                                    {% endwith %}
+                                                    {% endwith %}
+                                                {% endfor %}
                                             {% endfor %}
-                                        {% endfor %}
-                                    </ul>
+                                        </ul>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    {% else %}
-                        <div class="panel panel-default">
-                            <div class="panel-heading" role="tab" id="headingOne">
-                                <h4 class="panel-title">
-                                    {% include 'navigation/generic_link_instance.html' %}
-                                </h4>
+                        {% else %}
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="headingOne">
+                                    <h4 class="panel-title">
+                                        {% include 'navigation/generic_link_instance.html' %}
+                                    </h4>
+                                </div>
                             </div>
-                        </div>
-                    {% endif %}
-                {% endwith %}
-                {% endwith %}
+                        {% endif %}
+                    {% endwith %}
+                    {% endwith %}
+                {% endfor %}
             {% endfor %}
         {% endfor %}
-    {% endfor %}
-</div>
+    </div>
 {% endspaceless %}
diff --git a/mayan/apps/appearance/templates/appearance/menu_topbar.html b/mayan/apps/appearance/templates/appearance/menu_topbar.html
index b9401818a1..7c99533960 100644
--- a/mayan/apps/appearance/templates/appearance/menu_topbar.html
+++ b/mayan/apps/appearance/templates/appearance/menu_topbar.html
@@ -4,40 +4,40 @@
 {% load smart_settings_tags %}
 
 {% spaceless %}
-<nav class="navbar navbar-default navbar-fixed-top">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" type="button">
-                <span class="sr-only">{% trans 'Toggle navigation' %}</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="{% url home_view %}">{% smart_setting 'COMMON_PROJECT_TITLE' %}</a>
-        </div>
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <button aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" type="button">
+                    <span class="sr-only">{% trans 'Toggle navigation' %}</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="{% url home_view %}">{% smart_setting 'COMMON_PROJECT_TITLE' %}</a>
+            </div>
 
-        <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav navbar-right">
-                {% navigation_resolve_menu name='topbar' as topbar_menus_results %}
-                {% for tobpar_menu_result in topbar_menus_results %}
-                    {% for link_group in tobpar_menu_result.link_groups %}
-                        {% for link in link_group.links %}
-                            {% with 'true' as as_li %}
-                            {% with 'true' as hide_active_anchor %}
-                            {% with 'active' as li_class_active %}
-                            {% with 'first' as li_class_first %}
-                            {% with ' ' as link_classes %}
-                                {% include 'navigation/generic_subnavigation.html' %}
-                            {% endwith %}
-                            {% endwith %}
-                            {% endwith %}
-                            {% endwith %}
-                            {% endwith %}
+            <div id="navbar" class="navbar-collapse collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    {% navigation_resolve_menu name='topbar' as topbar_menus_results %}
+                    {% for tobpar_menu_result in topbar_menus_results %}
+                        {% for link_group in tobpar_menu_result.link_groups %}
+                            {% for link in link_group.links %}
+                                {% with 'true' as as_li %}
+                                {% with 'true' as hide_active_anchor %}
+                                {% with 'active' as li_class_active %}
+                                {% with 'first' as li_class_first %}
+                                {% with ' ' as link_classes %}
+                                    {% include 'navigation/generic_subnavigation.html' %}
+                                {% endwith %}
+                                {% endwith %}
+                                {% endwith %}
+                                {% endwith %}
+                                {% endwith %}
+                            {% endfor %}
                         {% endfor %}
                     {% endfor %}
-                {% endfor %}
-            </ul>
+                </ul>
+            </div>
         </div>
-    </div>
-</nav>
+    </nav>
 {% endspaceless %}