From 9ab9b79629c4e8f651b2c3d67c38561d9172b278 Mon Sep 17 00:00:00 2001
From: Vanguard90 <enesmil@gmail.com>
Date: Sun, 4 Dec 2016 17:39:13 +0100
Subject: [PATCH] Hamburger menu now opens and closes properly.

---
 secondary/img/header/hamburger-svg-white.svg | 10 ++++++
 secondary/index.html                         |  2 +-
 secondary/js-main.js                         | 33 ++++++++++++++++++--
 secondary/main.css                           | 29 +++++++----------
 4 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 secondary/img/header/hamburger-svg-white.svg

diff --git a/secondary/img/header/hamburger-svg-white.svg b/secondary/img/header/hamburger-svg-white.svg
new file mode 100644
index 00000000..ff92e175
--- /dev/null
+++ b/secondary/img/header/hamburger-svg-white.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F7F2F2;}
+</style>
+<path class="st0" d="M4,10h24c1.1,0,2-0.9,2-2s-0.9-2-2-2H4C2.9,6,2,6.9,2,8S2.9,10,4,10z M28,14H4c-1.1,0-2,0.9-2,2s0.9,2,2,2h24
+	c1.1,0,2-0.9,2-2S29.1,14,28,14z M28,22H4c-1.1,0-2,0.9-2,2s0.9,2,2,2h24c1.1,0,2-0.9,2-2S29.1,22,28,22z"/>
+</svg>
diff --git a/secondary/index.html b/secondary/index.html
index 4595503a..05633b01 100644
--- a/secondary/index.html
+++ b/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>
diff --git a/secondary/js-main.js b/secondary/js-main.js
index 775ad959..9ff1330e 100644
--- a/secondary/js-main.js
+++ b/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");
diff --git a/secondary/main.css b/secondary/main.css
index d565c856..15e45585 100644
--- a/secondary/main.css
+++ b/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 {