Mobile navigation added

ROOT/index.html

@@ -43,13 +43,14 @@
   	<!-- NAV
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 	<nav id="navbar" style="top: 0px;">
+		<div id="navlinks">
 			<a href="https://seppjm.com">Home</a>
 			<a href="#About">AboutMe</a>
 			<a href="https://diodematrix.com">DiodeMatrix</a>
 			<a href="https://brain.seppdroid.com">BrainBlog</a>
 			<div class="dropdown">
 				<a href="#" class="dropbtn" onclick="DropFunc()">Links
-					<i class="fa fa-caret-down"></i>
+					<i href="javascript:void(0);" class="fa fa-caret-down"></i>
 				</a>
 				<div class="dropdown-content" id="DropList">
 					<a href="#">Twitter</a>
@@ -58,6 +59,10 @@
 					<a href="#">Contact</a>
 				</div>
 			</div>
+		</div>
+		<div id="burgermenu">
+			<a class="fa fa-bars" href="javascript:void(0);" style="font-size: 22px;" onclick="BurgMenFunc()"></a>
+		</div>
 	</nav> 
 </div>
   <div class="container">

_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.
 	======================================================= */

_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');
     }
   }
-}
+}
+
+/*  ===============================================
+ 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";
+  }
+}