diff --git a/docs/client/docs.css b/docs/client/docs.css
index 70afcfd9cd..5240351084 100644
--- a/docs/client/docs.css
+++ b/docs/client/docs.css
@@ -173,7 +173,7 @@ a:hover {
 /** Main pane **/
 
 #main {
-    margin: 10px;
+    margin: 10px 10px 10px 60px;
     line-height: 1.3;
     color: #333333;
 }
@@ -407,10 +407,34 @@ dl.callbacks {
 
 /** layout control **/
 
-/* default to no sidebar */
-#nav {
+#menu-ico {
+    font-size: 30px;
+    float: right;
+    position: fixed;
+    top: 3px;
+    left: 6px;
+}
+
+#menu-ico.hidden {
     display: none;
 }
+
+/* default to no sidebar */
+#nav {
+    display: block;
+    background: #FFF;
+    position: fixed;
+    width: 260px;
+    height: 100%;
+    top: 0;
+    left: -220px;
+}
+
+#nav.show {
+    left: 0;
+    overflow: auto;
+}
+
 .github-ribbon {
     display: none;
 }
@@ -419,37 +443,44 @@ pre {
 }
 
 @media (min-width: 768px) {
-/* ipad portrait or better */
-#main {
-    width: 440px;
-    height: 100%;
-    margin-left: 260px; /* nav width + padding */
-    padding: 30px;
-}
-#nav {
-    display: block;
-    width: 200px;
-    position: fixed;
-    overflow: auto;
-    height: 100%;
-    top: 0;
-    left: 0;
-}
-.main-headline {
-    display: none;
-}
+    /* ipad portrait or better */
+    #main {
+        width: 440px;
+        height: 100%;
+        margin-left: 260px; /* nav width + padding */
+        padding: 30px;
+    }
+    #nav {
+        display: block;
+        width: 200px;
+        position: fixed;
+        overflow: auto;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+    .main-headline {
+        display: none;
+    }
+
+    #menu-ico {
+        display: none;
+    }
 }
 
 @media (min-width: 1024px) {
-/* ipad landscape and desktop */
-#main {
-    width: 610px;
-    margin-left: 330px; /* nav width + padding */
-}
-#nav {
-    width: 270px;
-}
-.github-ribbon {
-    display: block;
-}
+    /* ipad landscape and desktop */
+    #main {
+        width: 610px;
+        margin-left: 330px; /* nav width + padding */
+    }
+    #nav {
+        width: 270px;
+    }
+    .github-ribbon {
+        display: block;
+    }
+    #menu-ico {
+        display: none;
+    }
 }
diff --git a/docs/client/docs.html b/docs/client/docs.html
index c67d0b6139..b2bcfe2f78 100644
--- a/docs/client/docs.html
+++ b/docs/client/docs.html
@@ -8,7 +8,7 @@
 </head>
 
 <body>
-  <div id="nav">
+  <div id="nav" class="hide">
     {{> nav }}
   </div>
   <div id="main">
@@ -23,6 +23,7 @@
 </body>
 
 <template name="nav">
+  <div id="menu-ico"><a href="#">&#9776;</a></div>
   <div id="nav-inner">
     {{#each sections}}
       {{#if type "spacer"}}
diff --git a/docs/client/docs.js b/docs/client/docs.js
index 23a101c858..5873bc04b7 100644
--- a/docs/client/docs.js
+++ b/docs/client/docs.js
@@ -88,8 +88,18 @@ Meteor.startup(function () {
 
   // Make external links open in a new tab.
   $('a:not([href^="#"])').attr('target', '_blank');
+
+  // Hide menu by tapping on background
+  $('#main').on('click', function () {
+    hideMenu();
+  });
 });
 
+var hideMenu = function () {
+  $('#nav').removeClass('show');
+  $('#menu-ico').removeClass('hidden');
+};
+
 var toc = [
   {name: "Meteor " + Template.headline.release(), id: "top"}, [
     "Quick start",
@@ -406,7 +416,7 @@ Template.nav.sections = function () {
 
 Template.nav.type = function (what) {
   return this.type === what;
-}
+};
 
 Template.nav.maybe_current = function () {
   return Session.equals("section", this.id) ? "current" : "";
@@ -416,6 +426,18 @@ Template.nav_section.depthIs = function (n) {
   return this.depth === n;
 };
 
+// Show hidden TOC when menu icon is tapped
+Template.nav.events({
+  'click #menu-ico' : function () {
+    $('#nav').addClass('show');
+    $('#menu-ico').addClass('hidden');
+  },
+  // Hide TOC when selecting an item
+  'click a' : function () {
+    hideMenu();
+  }
+});
+
 UI.registerHelper('dstache', function() {
   return '{{';
 });
