In mobile view, put the sidebar at the bottom, not the top. Duh.

doc/_includes/footer.html

         <div style="clear: both;"></div>
       </section>
+
+      <section id="menu">
+        <ul>
+          <li><a href="{{ site.baseurl }}index.html">Introduction</a></li>
+          <li><a href="{{ site.baseurl }}news/">News</a></li>
+          <li><a href="{{ site.baseurl }}install.html">Installation</a></li>
+          <li><a href="{{ site.baseurl }}language.html">Schema Language</a></li>
+          <li><a href="{{ site.baseurl }}encoding.html">Encoding</a></li>
+          <li><a href="{{ site.baseurl }}rpc.html">RPC Protocol</a></li>
+          <li><a href="{{ site.baseurl }}capnp-tool.html">The <code>capnp</code> Tool</a></li>
+          <li><a href="{{ site.baseurl }}cxx.html">C++ Serialization</a></li>
+          <li><a href="{{ site.baseurl }}cxxrpc.html">C++ RPC</a></li>
+          <li><a href="{{ site.baseurl }}otherlang.html">Other Languages</a></li>
+          <li><a href="{{ site.baseurl }}roadmap.html">Road Map</a></li>
+          <li><a href="{{ site.baseurl }}faq.html">FAQ</a></li>
+        </ul>
+      </section>
+      <script type="text/javascript">setupSidebar()</script>
     </div>
 
     <!-- FOOTER  -->

doc/_includes/header.html

@@ -40,20 +40,4 @@
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
 
-      <section id="menu">
-        <ul>
-          <li><a href="{{ site.baseurl }}index.html">Introduction</a></li>
-          <li><a href="{{ site.baseurl }}news/">News</a></li>
-          <li><a href="{{ site.baseurl }}install.html">Installation</a></li>
-          <li><a href="{{ site.baseurl }}language.html">Schema Language</a></li>
-          <li><a href="{{ site.baseurl }}encoding.html">Encoding</a></li>
-          <li><a href="{{ site.baseurl }}rpc.html">RPC Protocol</a></li>
-          <li><a href="{{ site.baseurl }}capnp-tool.html">The <code>capnp</code> Tool</a></li>
-          <li><a href="{{ site.baseurl }}cxx.html">C++ Serialization</a></li>
-          <li><a href="{{ site.baseurl }}cxxrpc.html">C++ RPC</a></li>
-          <li><a href="{{ site.baseurl }}otherlang.html">Other Languages</a></li>
-          <li><a href="{{ site.baseurl }}roadmap.html">Road Map</a></li>
-          <li><a href="{{ site.baseurl }}faq.html">FAQ</a></li>
-        </ul>
-      </section>
       <section id="main_content" class="inner">

doc/_layouts/page.html

 {% include header.html %}
 {{ content }}
-<script type="text/javascript">setupSidebar()</script>
 {% include footer.html %}

doc/_layouts/post.html

@@ -11,9 +11,9 @@ href="https://groups.google.com/group/capnproto-announce">Get Email Updates</a>
   on <span class="date">{{ page.date | date_to_string }}</span>
 </p>
 {{ content }}
-<script type="text/javascript">setupNewsSidebar([
+<script type="text/javascript">var CAPNP_NEWS_SIDEBAR = [
     {% for post in site.posts %}
       { title: "{{ post.title }}", url: "{{ site.baseurl }}.{{ post.url }}" },
     {% endfor %}
-    ]);</script>
+    ];</script>
 {% include footer.html %}

doc/javascripts/main.js

@@ -16,6 +16,7 @@ function initSidebar() {
     if (window.innerWidth < 900) {
       document.body.className = "narrow";
       menu.className = "";
+      document.getElementById("main_content").style.minHeight = "0";
     } else {
       if (document.body.clientWidth < 1340) {
         document.body.className = "normal";
@@ -31,6 +32,10 @@ function initSidebar() {
       } else {
         menu.className = "floating";
       }
+
+      setTimeout(function () {
+        document.getElementById("main_content").style.minHeight = menu.clientHeight + 100 + "px";
+      }, 10);
     }
   };
   setMenuLayout();
@@ -58,12 +63,15 @@ function initSidebar() {
     }
   }
 
-  document.getElementById("main_content").style.minHeight = menu.clientHeight + 100 + "px";
-
   return toc;
 }
 
 function setupSidebar() {
+  if (window.CAPNP_NEWS_SIDEBAR) {
+    setupNewsSidebar(CAPNP_NEWS_SIDEBAR);
+    return;
+  }
+
   var filename = document.location.pathname;
 
   if (filename.slice(0, 5) == "/next") {

doc/news/index.html

@@ -20,5 +20,4 @@ href="https://groups.google.com/group/capnproto-announce">Get Email Updates</a>
 {{ post.content }}
 {% endfor %}
 
-<script type="text/javascript">setupSidebar()</script>
 {% include footer.html %}

doc/stylesheets/stylesheet.css

@@ -596,7 +596,7 @@ body.narrow #menu {
   position: relative;
   max-width: 640px;
   padding: 50px 10px 0px 10px;
-  margin: 0 auto;
+  margin: 0 auto 1em;
 }
 
 @media screen and (max-width: 480px) {