Prevent navigation arrows from collapsing with text on smaller screen. Fix #42

src/theme/book.css

@@ -37,6 +37,8 @@ html, body {
     background: none repeat scroll 0 0 #FFF;
     -webkit-overflow-scrolling: touch;
 
+    min-height: 100%;
+
     /* Animation: slide away */
     -webkit-transition: left 0.5s; /* Safari */
     -o-transition: left 0.5s; /* Opera */
@@ -44,22 +46,14 @@ html, body {
     transition: left 0.5s;
 }
 
-@media only screen and (max-width: 1060px) {
-    .sidebar {
-        left: -300px;
-    }
-    .page-wrapper {
-        left: 15px;
-        padding-right: 15px;
-    }
-}
-
 .page {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
+
+    padding-right: 15px;
     overflow-y: auto;
 }
 
@@ -202,6 +196,8 @@ html, body {
     transition: color 0.5s;
 }
 
+.mobile-nav-chapters { display: none; }
+
 .nav-chapters:hover {
     color: #333;
     text-decoration: none;
@@ -214,3 +210,51 @@ html, body {
 .next {
     right: 0;
 }
+
+
+@media only screen and (max-width: 1060px) {
+    .sidebar {
+        left: -300px;
+    }
+    .page-wrapper {
+        left: 15px;
+        padding-right: 15px;
+    }
+}
+
+/* Fix the navigation arrows that collapsed with the text on smaller screens */
+
+@media only screen and (max-width: 1250px) {
+    .nav-chapters {
+        display: none;
+    }
+
+    .mobile-nav-chapters {
+        color: #CCC;
+        font-size: 40px;
+        text-align: center;
+        text-decoration: none;
+
+        max-width: 150px;
+        min-width: 90px;
+
+        justify-content: center;
+        align-content: center;
+
+        position: relative;
+        display: inline-block;
+        margin-bottom: 50px;
+
+        border-radius: 5px;
+        background-color: #E0E0E0;
+        color: #999;
+    }
+
+    .next {
+        float: right;
+    }
+
+    .previous {
+        float: left;
+    }
+}

src/theme/index.hbs

@@ -29,8 +29,21 @@
                 <div id="content" class="content">
                     {{{ content }}}
                 </div>
-            </div>
 
+                <!-- Mobile navigation buttons -->
+                {{#previous}}
+                    <a href="{{link}}" class="mobile-nav-chapters previous">
+                        <i class="fa fa-angle-left"></i>
+                    </a>
+                {{/previous}}
+
+                {{#next}}
+                    <a href="{{link}}" class="mobile-nav-chapters next">
+                        <i class="fa fa-angle-right"></i>
+                    </a>
+                {{/next}}
+
+            </div>
 
             {{#previous}}
                 <a href="{{link}}" class="nav-chapters previous">