added hamburger animation

Author: reveurguy

_includes/navbar.html

@@ -1,12 +1,16 @@
 
-<nav class="navbar navbar-expand-lg navbar-dark">	
-	<div class="d-flex d-none d-sm-block d-md-block d-lg-none">
+<nav class="navbar navbar-dark">	
+	<div class="d-flex d-none d-sm-block d-md-block mx-auto">
 		<div class="navbar-header">
 		  <a class="navbar-brand" href="/"><img src="/assets/img/logo/logo.png" style="height: 70px; width: 70px; background-color: white;" class="mr-3">Py Contributors</a>
 		</div>	
 	</div>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
+     <div class="hamburger">
+        <div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+    </div>
     </button>
 
     <div class="collapse navbar-collapse" id="navbarColor03">
@@ -46,4 +50,16 @@
     </ul>
 		</div>
 	</div>
-  </nav>
+  </nav>
+
+<script>
+	const menu = document.querySelector('.hamburger');
+const list = document.querySelectorAll('li');
+
+menu.addEventListener('click', () => {
+    list.forEach(item => {
+        item.classList.toggle('active');
+    })
+    menu.classList.toggle('cross');
+})
+</script>

assets/css/main.css

@@ -158,4 +158,77 @@ background-attachment: fixed !important;
 	{
 		margin-left: 50%;
 	}
-}
+}
+/* Hamburger */
+
+.hamburger {
+    z-index: 1;
+    display: inline-block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+.line1 ,.line2 ,.line3 {
+    width: 35px;
+    height: 5px;
+    background-color: white;
+    margin: 6px 0;
+    transition: 0.4s;
+}
+
+.cross .line1 {
+    transform: rotate(-45deg) translate(-9px, 6px);
+}
+
+.cross .line2 {
+    opacity: 0;
+    background-color: white;
+}
+
+.cross .line3 {
+    transform: rotate(45deg) translate(-8px, -8px);
+    background-color: white;
+}
+ul {
+    height: 100%;
+}
+
+ul li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20%;
+    color: white;
+    background-color: black;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    transition: all 0.4s ease-out;
+    transform: translateX(-100%);
+}
+
+ul li.active {
+    transform: translateX(0);
+}
+
+ul li:nth-child(1) {
+    background-color: #355070;
+    transition-delay: 0.08s;
+}
+ul li:nth-child(2) {
+    background-color: #6D597A;
+    transition-delay: 0.16s;
+}
+ul li:nth-child(3) {
+    background-color: #B56576;
+    transition-delay: 0.24s;
+}
+ul li:nth-child(4) {
+    background-color: #E56B6F;
+    transition-delay: 0.32s;
+}
+ul li:nth-child(5) {
+    background-color: #EAAC8B;
+    transition-delay: 0.40s;
+}