Center the hamburger.

user/themes/textbook/css/custom.css

@@ -38,7 +38,7 @@ details summary {
     cursor: pointer;
 }
 
-/****/
+/**********************************************************************************************************************/
 
 /* Hotfix for https://github.com/getgrav/grav-theme-quark/issues/9 */
 /* Must be below 3 or mobile will glitch
@@ -136,10 +136,13 @@ iframe.geogebra {
 /** Mobile navigation without javascript ******************************************************************************/
 /** We're using the checkbox hack. **/
 
+.mobile-menu .button_container {
+    right: 50%;
+}
+
 .mobile-menu .button_container .top,
 .mobile-menu .button_container .middle,
-.mobile-menu .button_container .bottom
-{
+.mobile-menu .button_container .bottom {
     z-index: 3;
 }
 
@@ -148,7 +151,9 @@ iframe.geogebra {
     width: 42px;
     height: 42px;
     position: absolute;
-    right: 0.8em;
+    /*right: 0.8em;*/
+    right: 50%;
+    right: calc(50% - 7px);
     top: 0.8em;
     z-index: 200;
 
@@ -181,8 +186,8 @@ iframe.geogebra {
     text-align: left;
     word-break: break-word;
 
-    line-height: 2rem;
-    font-size: 1.8rem;
+    line-height: 1.8rem;
+    font-size: 1.6rem;
 
     padding: 0;
     margin: 0;
@@ -196,14 +201,15 @@ iframe.geogebra {
     padding-bottom: 0.1em;
 }
 
-.mobile-menu ul ul ul {
-    line-height: 1.4rem;
-    font-size: 1.4rem;
-}
+/*.mobile-menu ul ul ul {*/
+/*    line-height: 1.4rem;*/
+/*    font-size: 1.4rem;*/
+/*}*/
 
 .mobile-menu li summary {
     padding: .4em 0.05em .2em 0.4em;
 }
+
 .mobile-menu li > a {
     padding: 0.2em 0.1em 0.3em 0.4em;
     display: block;
@@ -211,9 +217,11 @@ iframe.geogebra {
     border-left: 1px solid #424242;
     border-bottom: 1px solid #424242;
 }
+
 .mobile-menu a.active {
     font-style: italic;
 }
+
 .mobile-menu ul {
     padding-left: 0.33rem;
     list-style: none;

user/themes/textbook/templates/partials/base.html.twig

@@ -72,10 +72,10 @@
             </section>
         </section>
 
-        <input id="mobile-navigation-toggle" type="checkbox">
+        <input id="mobile-navigation-toggle" tabindex="1" type="checkbox">
 
         <div class="mobile-menu">
-            <div class="button_container" id="toggle" tabindex="0">
+            <div class="button_container">
                 <span class="top"></span>
                 <span class="middle"></span>
                 <span class="bottom"></span>