diff --git a/lib/rdoc/generator/template/darkfish/_head.rhtml b/lib/rdoc/generator/template/darkfish/_head.rhtml
index d5aed3e9ef..69649ad3b5 100644
--- a/lib/rdoc/generator/template/darkfish/_head.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_head.rhtml
@@ -1,4 +1,5 @@
 <meta charset="<%= @options.charset %>">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <title><%= h @title %></title>
 
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
new file mode 100644
index 0000000000..b51448a8f7
--- /dev/null
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
@@ -0,0 +1,3 @@
+<button id="navigation-toggle" class="navigation-toggle" aria-label="Toggle sidebar" aria-expanded="true" aria-controls="navigation">
+  <span aria-hidden>☰</span>
+</button>
diff --git a/lib/rdoc/generator/template/darkfish/class.rhtml b/lib/rdoc/generator/template/darkfish/class.rhtml
index d6510336df..915b2f9c9f 100644
--- a/lib/rdoc/generator/template/darkfish/class.rhtml
+++ b/lib/rdoc/generator/template/darkfish/class.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="<%= klass.type %>">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
     <%= render '_sidebar_search.rhtml' %>
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 2cc55e03b1..00045abb58 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -19,12 +19,12 @@ body {
   font-weight: 300;
 
   /* Layout */
-  display: grid;
-  grid-template-columns: auto 1fr;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 body > :last-child {
-  grid-column: 1 / 3;
+  width: 100%;
 }
 
 h1 span,
@@ -203,24 +203,38 @@ nav {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   border-right: 1px solid #ccc;
-  position: sticky;
+  position: fixed;
   top: 0;
   overflow: auto;
+  z-index: 10;
 
   /* Layout */
-  width: 260px; /* fallback */
-  width: max(50px, 20vw);
-  min-width: 50px;
-  max-width: 80vw;
-  height: calc(100vh - 100px); /* reduce the footer height */
-  resize: horizontal;
+  width: 300px;
+  min-height: 100vh;
+  background: white;
+}
+
+@media (min-width: 1024px) {
+  nav {
+    min-height: unset;
+    height: calc(100vh - 100px); /* reduce the footer height */
+  }
 }
 
 main {
   display: block;
-  margin: 1em;
+  margin: 3em 1em 1em;
   min-width: 340px;
   font-size: 16px;
+  width: 100%;
+  max-width: 64em;
+}
+
+@media (min-width: 1024px) {
+  main {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 main h1,
@@ -232,8 +246,10 @@ main h6 {
   font-family: Helvetica, sans-serif;
 }
 
-.table-of-contents main {
-  margin-left: 2em;
+@media (min-width: 1024px) {
+  .table-of-contents main {
+    margin-left: 20em;
+  }
 }
 
 #validator-badges {
@@ -280,6 +296,38 @@ nav p {
   list-style: none;
 }
 
+.navigation-toggle {
+  position: fixed;
+  left: 4px;
+  z-index: 100;
+
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 24px;
+}
+.navigation-toggle[aria-expanded="true"] {
+  left: 260px;
+}
+
+/* Adds a suble gradient to help the toggle stand out from the background */
+.navigation-toggle::before {
+  content: "";
+  background: linear-gradient(180deg, rgba(250,250,250,1) 40%, rgba(250,250,250,0.8) 70%, rgba(250,250,250,0) 100%);
+  display: block;
+  z-index: -1;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  height: 50px;
+  width: 100vw;
+}
+
+.navigation-toggle[aria-expanded="true"]::before {
+  height: 0;
+}
+
 #project-navigation .nav-section {
   margin: 0;
   border-top: 0;
@@ -684,4 +732,3 @@ pre {
 }
 
 /* @end */
-
diff --git a/lib/rdoc/generator/template/darkfish/index.rhtml b/lib/rdoc/generator/template/darkfish/index.rhtml
index 423e225b68..b3eede6c00 100644
--- a/lib/rdoc/generator/template/darkfish/index.rhtml
+++ b/lib/rdoc/generator/template/darkfish/index.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="file">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
 
diff --git a/lib/rdoc/generator/template/darkfish/js/darkfish.js b/lib/rdoc/generator/template/darkfish/js/darkfish.js
index 19a85c54e1..bea0a5f1cb 100644
--- a/lib/rdoc/generator/template/darkfish/js/darkfish.js
+++ b/lib/rdoc/generator/template/darkfish/js/darkfish.js
@@ -90,8 +90,25 @@ function hookFocus() {
   });
 }
 
+function hookSidebar() {
+  var navigation = document.querySelector('#navigation');
+  var navigationToggle = document.querySelector('#navigation-toggle');
+
+  navigationToggle.addEventListener('click', function() {
+    navigation.hidden = !navigation.hidden;
+    navigationToggle.ariaExpanded = navigationToggle.ariaExpanded !== 'true';
+  });
+
+  var isSmallViewport = window.matchMedia("(max-width: 1024px)").matches;
+  if (isSmallViewport) {
+    navigation.hidden = true;
+    navigationToggle.ariaExpanded = false;
+  }
+}
+
 document.addEventListener('DOMContentLoaded', function() {
   hookSourceViews();
   hookSearch();
   hookFocus();
+  hookSidebar();
 });
diff --git a/lib/rdoc/generator/template/darkfish/page.rhtml b/lib/rdoc/generator/template/darkfish/page.rhtml
index 4a6b006bb3..90b9e4ee3b 100644
--- a/lib/rdoc/generator/template/darkfish/page.rhtml
+++ b/lib/rdoc/generator/template/darkfish/page.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="file">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
     <%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
 <main role="main" aria-label="Page <%=h file.full_name%>">
 <%= file.description %>
 </main>
-
diff --git a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
index f0841572c3..b30e64eec5 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
@@ -1,5 +1,7 @@
 <body role="document">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <%= render '_sidebar_navigation.rhtml' %>
 
   <%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
 
   <p><%= message %>
 </main>
-
diff --git a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
index cab3092b17..859ce2930b 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
@@ -1,5 +1,7 @@
 <body role="document">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <div id="home-section" class="nav-section">
       <h2>
diff --git a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
index 54a376c9e5..5869873775 100644
--- a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
+++ b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
@@ -1,4 +1,13 @@
 <body id="top" class="table-of-contents">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
+  <div id="project-navigation">
+    <%= render '_sidebar_navigation.rhtml' %>
+
+    <%= render '_sidebar_search.rhtml' %>
+  </div>
+</nav>
 <main role="main">
 <h1 class="class"><%= h @title %></h1>
 
