diff --git a/demos/pepper_and_carrot_e35_highres.html b/demos/pepper_and_carrot_e35_highres.html
index b3b7d02..17afdaa 100644
--- a/demos/pepper_and_carrot_e35_highres.html
+++ b/demos/pepper_and_carrot_e35_highres.html
@@ -38,11 +38,7 @@
                     </div>
                     <div class="grow obscured animated"></div>
                 </div>
-                <div id="nav-controls" class="fill">
-                    <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
-                    <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
-                </div>
-                <div id="help-menu">
+                <div id="help-menu" class="fill">
                     <div id="help-controls" style="opacity:1; transform: translate(0,0);">
                         <div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
                         <div><div class="key">&rarr;</div>/ scroll down / clic  : next</div>
@@ -52,6 +48,10 @@
                         <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
                     </div>
                 </div>
+                <div id="nav-controls" class="fill">
+                    <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
+                    <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
+                </div>
             </div>
             <div id="reader-progress-container">
                 <div id="reader-progress-bar"></div>
diff --git a/demos/pepper_and_carrot_e35_lowres.html b/demos/pepper_and_carrot_e35_lowres.html
index b3a3add..d206ac9 100644
--- a/demos/pepper_and_carrot_e35_lowres.html
+++ b/demos/pepper_and_carrot_e35_lowres.html
@@ -38,11 +38,7 @@
                     </div>
                     <div class="grow obscured animated"></div>
                 </div>
-                <div id="nav-controls" class="fill">
-                    <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
-                    <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
-                </div>
-                <div id="help-menu">
+                <div id="help-menu" class="fill">
                     <div id="help-controls" style="opacity:1; transform: translate(0,0);">
                         <div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
                         <div><div class="key">&rarr;</div>/ scroll down / clic  : next</div>
@@ -52,6 +48,10 @@
                         <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
                     </div>
                 </div>
+                <div id="nav-controls" class="fill">
+                    <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
+                    <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
+                </div>
             </div>
             <div id="reader-progress-container">
                 <div id="reader-progress-bar"></div>
diff --git a/melpomene.html b/melpomene.html
index 5484c8c..0dc93ba 100644
--- a/melpomene.html
+++ b/melpomene.html
@@ -16,11 +16,7 @@
             </div>
             <div class="grow obscured animated"></div>
         </div>
-        <div id="nav-controls" class="fill">
-            <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
-            <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
-        </div>
-        <div id="help-menu">
+        <div id="help-menu" class="fill">
             <div id="help-controls" style="opacity:1; transform: translate(0,0);">
                 <div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
                 <div><div class="key">&rarr;</div>/ scroll down / clic  : next</div>
@@ -30,6 +26,10 @@
                 <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
             </div>
         </div>
+        <div id="nav-controls" class="fill">
+            <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
+            <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
+        </div>
     </div>
     <div id="reader-progress-container">
         <div id="reader-progress-bar"></div>
diff --git a/zooms_generator.py b/zooms_generator.py
index 24d900c..d075a87 100644
--- a/zooms_generator.py
+++ b/zooms_generator.py
@@ -27,11 +27,7 @@ HTML_END_CONSTANT = """\
             </div>
             <div class="grow obscured animated"></div>
         </div>
-        <div id="nav-controls" class="fill">
-            <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
-            <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
-        </div>
-        <div id="help-menu">
+        <div id="help-menu" class="fill">
             <div id="help-controls" style="opacity:1; transform: translate(0,0);">
                 <div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
                 <div><div class="key">&rarr;</div>/ scroll down / clic  : next</div>
@@ -41,6 +37,10 @@ HTML_END_CONSTANT = """\
                 <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
             </div>
         </div>
+        <div id="nav-controls" class="fill">
+            <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
+            <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
+        </div>
     </div>
     <div id="reader-progress-container">
         <div id="reader-progress-bar"></div>