editing hamburger animation

Author: reveurguy

_includes/navbar.html

@@ -15,7 +15,11 @@
 		<!-- <div class="container"> -->
     <!-- <div class="ml-auto mr-4"> -->
 <div class="nav-list">
-	 <div class="hamburger"><div class="bar"></div></div>
+	 <div class="hamburger">
+		<div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+	</div>
       <ul >
         {% if page.active == "home" %}
         <li class=" active"><a class="" href="/" data-after="Home">Home</a></li>
@@ -62,13 +66,13 @@
 const header = document.querySelector('.header.container');
 
 hamburger.addEventListener('click', () => {
-	hamburger.classList.toggle('active');
+    hamburger.classList.toggle('cross');
 	mobile_menu.classList.toggle('active');
 });
 
 menu_item.forEach((item) => {
 	item.addEventListener('click', () => {
-		hamburger.classList.toggle('active');
+		hamburger.classList.toggle('cross');
 		mobile_menu.classList.toggle('active');
 	});
 });

assets/css/main.css

@@ -162,6 +162,20 @@ background-attachment: fixed !important;
 
 /*  Chnages*/
 
+#header {
+	position: fixed;
+	z-index: 1000;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: auto;
+}
+#header .header {
+	min-height: 8vh;
+	background-color: rgba(31, 30, 30, 0.24);
+	transition: .3s ease background-color;
+}
+
 #header .nav-bar {
 	display: flex;
 	align-items: center;
@@ -219,57 +233,33 @@ background-attachment: fixed !important;
 #header .nav-list ul li:hover a {
 	color: crimson;
 }
-#header .hamburger {
-	height: 60px;
-	width: 60px;
-	display: inline-block;
-	border: 3px solid white;
-	border-radius: 50%;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 100;
-	cursor: pointer;
-	transform: scale(.8);
-	margin-right: 20px;
-}
-#header .hamburger:after {
-	position: absolute;
-	content: '';
-	height: 100%;
-	width: 100%;
-	border-radius: 50%;
-	border: 3px solid white;
-	animation: hamburger_puls 1s ease infinite;
-}
-#header .hamburger .bar {
-	height: 2px;
-	width: 30px;
-	position: relative;
-	background-color: white;
-	z-index: -1;
-}
-#header .hamburger .bar::after,
-#header .hamburger .bar::before {
-	content: '';
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	left: 0;
-	background-color: white;
-	transition: .3s ease;
-	transition-property: top, bottom;
+.hamburger {
+    z-index: 1;
+    display: inline-block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
 }
-#header .hamburger .bar::after {
-	top: 8px;
+
+.line1 ,.line2 ,.line3 {
+    width: 35px;
+    height: 5px;
+    background-color: white;
+    margin: 6px 0;
+    transition: 0.4s;
 }
-#header .hamburger .bar::before {
-	bottom: 8px;
+
+.cross .line1 {
+    transform: rotate(-45deg) translate(-9px, 6px);
 }
-#header .hamburger.active .bar::before {
-	bottom: 0;
+
+.cross .line2 {
+    opacity: 0;
+    background-color: white;
 }
-#header .hamburger.active .bar::after {
-	top: 0;
+
+.cross .line3 {
+    transform: rotate(45deg) translate(-8px, -8px);
+    background-color: white;
 }