diff --git a/beta/1.1.html b/beta/1.1.html
index a55f12b9..3e966f61 100644
--- a/beta/1.1.html
+++ b/beta/1.1.html
@@ -76,6 +76,7 @@
 </style>
 <link href="assets/default.css" media="all" rel="stylesheet">
 <link href="assets/screen.css" media="screen" rel="stylesheet">
+<link href="assets/screen-narrow.css" media="screen and (max-width: 50em)" rel="stylesheet">
 <noscript><link href="assets/screen-noscript.css" media="screen" rel="stylesheet"></noscript>
 <link href="https://github.com/Kozea/Radicale/releases.atom" rel="alternate" title="Radicale Releases" type="application/atom+xml">
 <link href="assets/icon.png" rel="shortcut icon" type="image/png">
@@ -83,6 +84,7 @@
 <meta content="Free and Open-Source CalDAV and CardDAV Server" name="description">
 <script src="assets/navigation.js"></script>
 <script src="assets/document-branches.js"></script>
+<script src="assets/narrow-menu.js"></script>
 <script>
     const documentBranch = "1.1";
     const documentBranches = ["1.1", "2.1", "master"];
@@ -104,7 +106,14 @@
 </div>
 </header>
 <main>
+<div class="navButtonContainer">
+<button data-name="nav-open">Contents</button>
+</div>
 <nav>
+<div class="navContainer">
+<div class="navButtonContainer">
+<button data-name="nav-close">Close</button>
+</div>
 <h2>Contents</h2>
 <ul>
 <li class="level2"><a href="#a-simple-calendar-and-contact-server">A Simple Calendar and Contact Server</a>
@@ -269,6 +278,7 @@
 <li class="level4"><a href="#footnotes//10">10</a></li>
 </ul></li>
 </ul>
+</div>
 </nav>
 <div class="documentContainer">
 <section class="level2" id="a-simple-calendar-and-contact-server">
diff --git a/beta/2.1.html b/beta/2.1.html
index 03cd9935..c45906ef 100644
--- a/beta/2.1.html
+++ b/beta/2.1.html
@@ -76,6 +76,7 @@
 </style>
 <link href="assets/default.css" media="all" rel="stylesheet">
 <link href="assets/screen.css" media="screen" rel="stylesheet">
+<link href="assets/screen-narrow.css" media="screen and (max-width: 50em)" rel="stylesheet">
 <noscript><link href="assets/screen-noscript.css" media="screen" rel="stylesheet"></noscript>
 <link href="https://github.com/Kozea/Radicale/releases.atom" rel="alternate" title="Radicale Releases" type="application/atom+xml">
 <link href="assets/icon.png" rel="shortcut icon" type="image/png">
@@ -83,6 +84,7 @@
 <meta content="Free and Open-Source CalDAV and CardDAV Server" name="description">
 <script src="assets/navigation.js"></script>
 <script src="assets/document-branches.js"></script>
+<script src="assets/narrow-menu.js"></script>
 <script>
     const documentBranch = "2.1";
     const documentBranches = ["1.1", "2.1", "master"];
@@ -104,7 +106,14 @@
 </div>
 </header>
 <main>
+<div class="navButtonContainer">
+<button data-name="nav-open">Contents</button>
+</div>
 <nav>
+<div class="navContainer">
+<div class="navButtonContainer">
+<button data-name="nav-close">Close</button>
+</div>
 <h2>Contents</h2>
 <ul>
 <li class="level2"><a href="#getting-started">Getting started</a>
@@ -374,6 +383,7 @@
 <li class="level3"><a href="#news/july-27-2009---radicale-ready-to-launch">July 27, 2009 - Radicale Ready to Launch</a></li>
 </ul></li>
 </ul>
+</div>
 </nav>
 <div class="documentContainer">
 <section class="level2" id="getting-started">
diff --git a/beta/master.html b/beta/master.html
index fff1f047..8110ceb3 100644
--- a/beta/master.html
+++ b/beta/master.html
@@ -76,6 +76,7 @@
 </style>
 <link href="assets/default.css" media="all" rel="stylesheet">
 <link href="assets/screen.css" media="screen" rel="stylesheet">
+<link href="assets/screen-narrow.css" media="screen and (max-width: 50em)" rel="stylesheet">
 <noscript><link href="assets/screen-noscript.css" media="screen" rel="stylesheet"></noscript>
 <link href="https://github.com/Kozea/Radicale/releases.atom" rel="alternate" title="Radicale Releases" type="application/atom+xml">
 <link href="assets/icon.png" rel="shortcut icon" type="image/png">
@@ -83,6 +84,7 @@
 <meta content="Free and Open-Source CalDAV and CardDAV Server" name="description">
 <script src="assets/navigation.js"></script>
 <script src="assets/document-branches.js"></script>
+<script src="assets/narrow-menu.js"></script>
 <script>
     const documentBranch = "master";
     const documentBranches = ["1.1", "2.1", "master"];
@@ -104,7 +106,14 @@
 </div>
 </header>
 <main>
+<div class="navButtonContainer">
+<button data-name="nav-open">Contents</button>
+</div>
 <nav>
+<div class="navContainer">
+<div class="navButtonContainer">
+<button data-name="nav-close">Close</button>
+</div>
 <h2>Contents</h2>
 <ul>
 <li class="level2"><a href="#getting-started">Getting started</a>
@@ -212,6 +221,7 @@
 <li class="level4"><a href="#about//history">History</a></li>
 </ul></li>
 </ul>
+</div>
 </nav>
 <div class="documentContainer">
 <section class="level2" id="getting-started">