diff --git a/css/main.css b/css/main.css
index bedc96ff4..980cc0d13 100644
--- a/css/main.css
+++ b/css/main.css
@@ -185,6 +185,15 @@ small.has-error {
   color: #f04124;
 }
 
+@media (max-width: 641px) {
+  .hide_menu {
+    display: none;
+  }
+  .show_menu {
+    display: block;
+  }
+}
+
 hr { margin: 2.25rem 0;}
 
 button.primary { background-color: #111; }
diff --git a/index.html b/index.html
index 6773f7b4b..6544f6617 100644
--- a/index.html
+++ b/index.html
@@ -27,11 +27,11 @@
         <ul class="title-area">
           <li class="name"></li>
           <li class="toggle-topbar menu-icon">
-            <a href="#"> Menu</a>
+            <a ng-click="isCollapsed=!isCollapsed"> Menu</a>
           </li>
         </ul>
 
-        <section class="top-bar-section">
+        <section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
           <ul>
             <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="large-2 text-center" data-ng-class="{active: isActive(item)}">
               <a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>
diff --git a/js/controllers/header.js b/js/controllers/header.js
index d6680e76b..4236c486f 100644
--- a/js/controllers/header.js
+++ b/js/controllers/header.js
@@ -47,4 +47,5 @@ angular.module('copay.header').controller('HeaderController',
       $rootScope.flashMessage = {};
     };
 
+    $rootScope.isCollapsed = true;
   });