Fix the mobile menu and prevent the page scrolling when the mobile menu open

theme/static/css/custom.css

@@ -23,6 +23,7 @@ html[data-theme="dark"] {
     --button-primary-color: white;
 }
 
+
 /* add a transition to ease into new themes */
 /* looks best in Mozilla, text transitions late in Safari/Chrome */
 html.transition-theme,
@@ -377,6 +378,7 @@ img.responsive {
     display: block;
     border: 0;
     padding: 0;
+    height: 100vh;
 }
 
 .navbar .navbar-hamburger-button {
@@ -404,6 +406,7 @@ img.responsive {
     border-bottom: 1px solid var(--border-color-softer);
     padding: 2rem;
     max-height: unset;
+
 }
 
 @media only screen and (min-width: 600px) {
@@ -425,6 +428,8 @@ img.responsive {
         width: 100%;
         border: 0;
         padding: 0;
+    /* height: 100vh; */
+
     }
 
     .navbar-download-button .button {
@@ -749,3 +754,11 @@ article.news + article.news {
     padding: 1em;
     margin: 0 0 2em 0;
 }
+
+
+
+.scroll-lock {
+    overflow: auto;
+    position: fixed;
+    width: 100%;
+  }

theme/templates/base.html

@@ -65,5 +65,17 @@
       {% include "footer.html" %}
       {% endblock %}
     </div>
+
+    <script>
+      const navToggle = document.getElementById('navbar-hamburger-button');
+
+      navToggle.addEventListener('change', () => {
+        if (navToggle.checked) {
+          document.body.classList.add('scroll-lock');
+        } else {
+          document.body.classList.remove('scroll-lock');
+        }
+      });
+    </script>
   </body>
 </html>