diff --git a/_layouts/default.html b/_layouts/default.html index 26a106d7..5458554c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -11,6 +11,6 @@ - + diff --git a/_layouts/indexpage.html b/_layouts/indexpage.html index 961ae95e..b48b1a68 100644 --- a/_layouts/indexpage.html +++ b/_layouts/indexpage.html @@ -18,7 +18,17 @@ layout: default {% endif %} {% endfor %} -
+
+ + + +
{% endif %} {% if section.id != "faq" %} diff --git a/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss index 517425e0..2003c4cc 100644 --- a/_scss/module/_indexpage.scss +++ b/_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 { diff --git a/assets/js/main.js b/assets/js/main.js index df937404..ab0a67d2 100644 --- a/assets/js/main.js +++ b/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); +} \ No newline at end of file