new mobile menu

_layouts/default.html

@@ -11,6 +11,6 @@
   <footer>
     <!-- Last generated at {{ site.time | date_to_rfc822 }} -->
   </footer>
-  <script type="text/javascript" src="{{ site.url }}/assets/js/main.js"></script>
+  <script type="text/javascript" src="{{ site.baseurl }}/assets/js/main.js"></script>
 </body>
 </html>

_layouts/indexpage.html

@@ -18,7 +18,17 @@ layout: default
 						{% endif %}
 					{% endfor %}
 				</div>
-				<div class="right"></div>
+				<div class="right">
+					<input type="checkbox" id="show-menu" role="button">
+					<label for="show-menu" class="show-menu"></label>
+					<ul>
+						{% for section in page.sections %}
+							{% if section.link %}
+						  		<li><a class="mobileLink" href="#{{ section.id }}" data-link-for="{{ section.id }}">{{ section.link }}</a></li>
+							{% endif %}
+						{% endfor %}
+					</ul>
+				</div>
 			</nav>
 		{% endif %}
 		{% if section.id != "faq" %}

_scss/module/_indexpage.scss

@@ -9,14 +9,13 @@
 nav {
     display: flex;
     background: #555;
-    position: absolute;
     position: fixed;
     z-index: 1000;
     top: 0;
     left: 0;
     width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
+    //overflow-x: auto;
+    //overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     white-space: nowrap;
     .js & {
@@ -32,22 +31,66 @@ nav {
         }
     }
     .center {
-        float: left;
+        a {
+            display: none;
+            &[data-link-for="wannahelp"] {
+                display: inline-block;
+                background: $background-alternative;
+                animation: nav-link-pulse 2s linear infinite;
+            }
+        }
     }
-    a {
+    a, label {
         display: inline-block;
         padding: 10px;
         box-shadow: none;
         font-weight: normal;
-        &[data-link-for="wannahelp"]{
-            background: $background-alternative;
-            animation: nav-link-pulse 2s linear infinite;
-        }
-
     }
     .left, .right {
         flex: 1;
     }
+    .right {
+        text-align: right;
+        input[type=checkbox]{
+            display: none;
+        }
+        label:before {
+            content: "Menu";
+        }
+        input[type=checkbox]:checked ~ label {
+            background: #ec2727;
+            background: $background-alternative;
+            width: 30px;
+            text-align: center;
+            padding: 3px;
+            font-size: 30px;
+            &:before {
+                content: "X";
+            }
+        }
+        ul {
+            display: none;
+            li a {
+                display: block;
+            }
+        }
+        input[type=checkbox]:checked ~ ul {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            display: block;
+            background: #555;
+            text-align: center;
+        }
+    }
+    @include media-breakpoint-up(sm) {
+        .right label {
+            display: none;
+        }
+        .center a {
+            display: inline-block;
+        }
+    }
 }
 
 @keyframes nav-link-pulse {

assets/js/main.js

@@ -1,2 +1,12 @@
 document.documentElement.classList.remove("no-js");
 document.documentElement.classList.add("js");
+
+function closeMobileMenu(){
+	var menu = document.getElementById("show-menu");
+	menu.checked = false;
+}
+
+var mobileLinks = document.getElementsByClassName("mobileLink");
+for (var i = 0; i < mobileLinks.length; i++) {
+    mobileLinks[i].addEventListener('click', closeMobileMenu);
+}