Hamburger menu now opens and closes properly.

secondary/index.html

@@ -15,7 +15,7 @@
                 <img id="logo-image" src="img/header/leaf1-thumbnail.jpg" alt="single-green-leaf">
             </div>
             <div class="mobile-hamburger">
-                <a href="#menu" class="box-shadow-menu"></a>
+                <a href="#menu" class="hamburger-menu"><img class="hamburger-image hamburger-inactive" src="img/header/hamburger-svg-white.svg" alt="hamburger-icon"></a>
             </div>
                 <ol class="nav">
                     <li class="header-element"><a href="#">First link</a>

secondary/js-main.js

@@ -32,7 +32,7 @@ function nextimage() {
     }
 }
 
-setInterval(nextimage, 3000);
+setInterval(nextimage, 2500);
 
 /* Header image rotation end */
 
@@ -49,9 +49,38 @@ headerTag.removeChild(hamburgerMenu);
 
 }
 
-
 /* Mobile header area end */
 
+/* Mobile hamburger click start */
+
+let hamburgerImage = document.getElementsByClassName("hamburger-image");
+let nav = document.getElementsByClassName("nav");
+let imgTag = document.getElementsByTagName("img")[1];
+
+
+var hamburgerActive = imgTag.classList.contains('hamburger-active');
+var hamburgerInactive = imgTag.classList.contains('hamburger-inactive');
+
+setInterval(hamburgerCheck, 0500);
+
+function hamburgerCheck () {
+
+if (imgTag.classList.contains('hamburger-active')) {
+
+	hamburgerImage[0].removeEventListener("click", function clickFunction() {nav[0].style.display = "block"; hamburgerImage[0].setAttribute("class", "hamburger-active hamburger-image");}, false);
+	hamburgerImage[0].addEventListener("click", function clickFunctionNone() {nav[0].style.display = "none"; hamburgerImage[0].setAttribute("class", "hamburger-inactive hamburger-image");}, false);
+
+} else {
+
+	hamburgerImage[0].removeEventListener("click", function clickFunctionNone() {nav[0].style.display = "none"; hamburgerImage[0].setAttribute("class", "hamburger-inactive hamburger-image");}, false);
+	hamburgerImage[0].addEventListener("click", function clickFunction() {nav[0].style.display = "block"; hamburgerImage[0].setAttribute("class", "hamburger-active hamburger-image");}, false);
+
+}
+
+}
+
+/*Mobile hamburger click end */
+
 /* No link click event start */
 
 var buttonClick = document.getElementsByClassName("noLink");

secondary/main.css

@@ -997,30 +997,23 @@ header ol li:hover .header-element-11, header ol li:hover .header-element-12, he
     padding-top: 20px;
 }
 
-.hamburger-menu {
+.mobile-hamburger {
 
-    width: 20%;
-    position: inline-block;
+    height: 50px;
 }
 
-.box-shadow-menu {
+.hamburger-menu {
   position: relative;
-  padding-right: 40px;
-  height: 50px;
+  padding-right: 3%;
+  padding-top: 2%;
+  height: 13%;
+  width: 15%;
   float: right;
 }
-.box-shadow-menu:before {
-  content: "";
-  text-align: center;
-  position: absolute;
-  left: 0;
-  top: 20px;
-  width: 24px;
-  height: 1.5px;
-  background: black;
-  box-shadow: 
-    0 0.25em 0 0 black,
-    0 0.5em 0 0 black;
+
+.nav {
+
+    display: none;
 }
 
 .popup {