Force the menu to be the mobile menu.

This is a simple fix, but it does the job.

user/themes/textbook/css/custom.css

@@ -101,6 +101,37 @@ iframe.geogebra {
 /*    margin: 0;*/
 /*}*/
 
+/** Desktop header navigation *****************************************************************************************/
+
+/*nav.dropmenu > ul > li > ul > li {*/
+/*    font-size: 0.8em;*/
+/*}*/
+/*nav.dropmenu > ul > li ul li a {*/
+/*    min-width: 11rem;*/
+/*}*/
+/*nav.dropmenu ul {*/
+/*    white-space: initial;*/
+/*}*/
+
+.mobile-menu {
+    display: block;
+}
+
+.mobile-menu details[open] > summary ~ * {
+    animation: sweep .5s ease-in-out;
+}
+
+@keyframes sweep {
+    0%    {opacity: 0; margin-left: -10px}
+    100%  {opacity: 1; margin-left: 0px}
+}
+
+
+/*.relative{position:relative!important}*/
+
+/*#header {*/
+/*    padding-right: 4em;*/
+/*}*/
 
 /** Mobile navigation without javascript ******************************************************************************/
 /** We're using the checkbox hack. **/
@@ -116,7 +147,7 @@ iframe.geogebra {
     cursor: pointer;
     width: 42px;
     height: 42px;
-    position: fixed;
+    position: absolute;
     right: 0.8em;
     top: 0.8em;
     z-index: 200;
@@ -124,6 +155,10 @@ iframe.geogebra {
     opacity: 0;
 }
 
+#mobile-navigation-toggle:checked {
+    position: fixed;
+}
+
 .mobile-menu .button_container:hover { opacity: .95; }
 
 #mobile-navigation-toggle:checked ~ .mobile-menu .button_container { position: fixed; }

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

@@ -47,19 +47,17 @@
                         {% include 'partials/logo.html.twig' %}
                     </section>
 
-                    <section class="navbar-section desktop-menu">
-
-                        <nav class="dropmenu animated">
-                        {% block header_navigation %}
-                            {% include 'partials/navigation.html.twig' %}
-                        {% endblock %}
-                        </nav>
-
-                        {% if config.plugins.login.enabled and grav.user.username %}
-                            <span class="login-status-wrapper"><i class="fa fa-user"></i> {% include 'partials/login-status.html.twig' %}</span>
-                        {% endif %}
-
-                    </section>
+{# The old desktop menu, oh so buggy with big titles and going off-screen #}
+{#                    <section class="navbar-section desktop-menu">#}
+{#                        <nav class="dropmenu animated">#}
+{#                        {% block header_navigation %}#}
+{#                            {% include 'partials/navigation.html.twig' %}#}
+{#                        {% endblock %}#}
+{#                        </nav>#}
+{#                        {% if config.plugins.login.enabled and grav.user.username %}#}
+{#                            <span class="login-status-wrapper"><i class="fa fa-user"></i> {% include 'partials/login-status.html.twig' %}</span>#}
+{#                        {% endif %}#}
+{#                    </section>#}
 
                     {% block header_language_selection_section %}
                     <section class="navbar-section">