diff --git a/ROOT/index.html b/ROOT/index.html
index 70f6395..be4e35c 100644
--- a/ROOT/index.html
+++ b/ROOT/index.html
@@ -43,13 +43,14 @@
diff --git a/_CDN/css/skeleton.css b/_CDN/css/skeleton.css
index 53398a2..e3d9a0f 100644
--- a/_CDN/css/skeleton.css
+++ b/_CDN/css/skeleton.css
@@ -406,7 +406,78 @@ there.
@media (min-width: 400px) {}
/* Disable mobile-nav when going above 550px. */
-@media (max-width: 550px) {}
+@media (max-width: 550px) {
+
+/* =======================================================
+ mobile-navbar.
+ ======================================================= */
+#navbar {
+ overflow: hidden;
+ background-color: #C0C0C0;
+ position: fixed;
+ width: 100%;
+ text-align: center;
+ top: 0;
+ z-index: 100;
+ transition: top 0.3s;
+}
+#navbar a {
+ display: block;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px;
+ text-decoration: none;
+}
+#navbar a:hover {
+ background-color: #ffefef21;
+}
+.nav #navlinks {
+ display: none;
+}
+
+/* =======================================================
+ Dropdown for mobile-navbar.
+ ======================================================= */
+.dropdown {
+display: inline-block;
+color: #f2f2f2;
+text-align: center;
+text-decoration: none;
+}
+.dropdown .dropbtn {
+ border: none;
+ outline: none;
+ padding: 14px 16px;
+ background-color: inherit;
+ font-family: inherit;
+ margin: 0;
+}
+.navbar a:hover, .dropdown:hover .dropbtn {
+ background-color: #ffefef21;
+}
+.dropdown-content {
+ display: none;
+ position: fixed;
+ background-color: #000;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+.dropdown-content a {
+ float: none;
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ text-align: left;
+}
+.dropdown-content a:hover {
+ background-color: #ddd;
+}
+.show {
+ display: block;
+}
+}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
@@ -434,6 +505,9 @@ there.
#navbar a:hover {
background-color: #ffefef21;
}
+.nav #burgermenu {
+ display: none;
+}
/* =======================================================
Dropdown for navbar.
======================================================= */
diff --git a/_CDN/js/script.js b/_CDN/js/script.js
index 991af38..7db880f 100644
--- a/_CDN/js/script.js
+++ b/_CDN/js/script.js
@@ -1,28 +1,13 @@
-/* const nav = document.querySelector('#nav');
-let navTop = navbar.offsetTop;
-
-function fixedNav() {
- if (window.scrollY >= navTop) {
- navbar.classList.add('sticky');
- } else {
- navbar.classList.remove('sticky');
- }
-}
-
-window.addEventListener('scroll', fixedNav);
- */
-
/* ===============================================
Hide navbar on scrolldown, show on scrollup.
=============================================== */
-
-var prevScrollpos = window.pageYOffset;
+ var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
- document.getElementById("navbar").style.top = "-52px";
+ document.getElementById("navbar").style.top = "-322px";
}
prevScrollpos = currentScrollPos;
}
@@ -40,4 +25,16 @@ window.onclick = function(e) {
DropList.classList.remove('show');
}
}
-}
\ No newline at end of file
+}
+
+/* ===============================================
+ Drop & show mobile menu links.
+ =============================================== */
+function BurgMenFunc() {
+ var x = document.getElementById("navlinks");
+ if (x.style.display === "block") {
+ x.style.display = "none";
+ } else {
+ x.style.display = "block";
+ }
+}
\ No newline at end of file