Merge pull request #2 from WattleScript/fix-nav

Fix navbar on sm

Author: CallumDev

_includes/nav.html

@@ -1,8 +1,6 @@
- <ul>
-    <li>
-        <input id="menutoggle" class="menucheck" type="checkbox">
-    </li>
-    <li>
+ <ul id="navUl">
+    <li class="renderOnSm">
+        <input id="menutoggle" class="menucheck" type="checkbox" onclick="toggleNav()">
         <label for="menutoggle" class="menutext">Menu</label>
     </li>
     {% for item in site.data.navlist.docs %}
@@ -14,3 +12,8 @@
         </a>
     </li>
  </ul>
+<script>
+    function toggleNav() {
+        document.getElementById("navUl").classList.toggle("navChecked");
+    }
+</script>

assets/css/main.css

@@ -61,7 +61,7 @@ nav ul {
     line-height: 1.15;
 }
 
-nav ul li {
+nav ul li:not(.renderOnSm) {
     float: left;
     line-height: 1.15;
 }
@@ -211,7 +211,7 @@ pre.highlight code {
 }
 
 @media screen and (max-width: 980px) {
-    nav ul li {
+    nav ul li:not(.renderOnSm) {
         float: none;
         display: none;
     }
@@ -251,9 +251,6 @@ pre.highlight code {
         text-decoration: none;
         color: whitesmoke;
     }
-    .menucheck:checked ~ li {
-        display: block;
-    }
     .fixednav {
         position: relative;
     }
@@ -287,6 +284,10 @@ pre.highlight code {
         display: flex;
         justify-content: center;
     }
+
+    nav ul.navChecked li {
+        display: block;
+    }
 }
 
 @media (prefers-color-scheme: light) {