diff --git a/src/theme/book.css b/src/theme/book.css
index aacfea84..ec35f912 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -37,7 +37,7 @@ table thead td {
   font-weight: 700;
 }
 .sidebar {
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
@@ -99,6 +99,7 @@ table thead td {
 }
 .page-wrapper {
   position: absolute;
+  overflow-y: auto;
   left: 315px;
   right: 0;
   top: 0;
@@ -133,14 +134,7 @@ table thead td {
   left: 0;
   bottom: 0;
   padding-right: 15px;
-}
-@media only screen and (max-width: 400px) {
-  .page {
-    /* Only prevent horizontal scrolling on screens with less than 100px for the content
-       A better way would be to somehow prevent horizontal scrolling all the time, but this causes scrolling problems on iOS Safari.
-       Also, would be better to only enable horizontal scrolling when it is needed (content does not fit on page) but I have no idea how to do that. */
-    overflow-x: hidden;
-  }
+  overflow-y: auto;
 }
 .content {
   margin-left: auto;
@@ -163,7 +157,7 @@ table thead td {
 }
 .menu-bar i {
   position: relative;
-  padding: 0 10px;
+  margin: 0 10px;
   z-index: 10;
   line-height: 50px;
   -webkit-transition: color 0.5s;
@@ -211,7 +205,7 @@ table thead td {
   font-size: 2.5em;
   text-align: center;
   text-decoration: none;
-  position: fixed;
+  position: absolute;
   top: 50px /* Height of menu-bar */;
   bottom: 0;
   margin: 0;
@@ -250,13 +244,7 @@ table thead td {
 .nav-chapters:hover {
   text-decoration: none;
 }
-.sidebar-hidden .previous {
-  left: 0;
-}
-.sidebar-visible .nav-chapters .previous {
-  left: 300px;
-}
-.sidebar-visible .mobile-nav-chapters .previous {
+.previous {
   left: 0;
 }
 .next {