edited hamburger animation 3

Author: reveurguy

_includes/navbar.html

@@ -1,64 +1,48 @@
-	
-	<div class="d-flex d-none d-sm-block d-md-block mx-auto">
+<nav class="navbar navbar-expand-lg navbar-dark">	
+	<div class="d-flex d-none d-sm-block d-md-block d-lg-none">
 		<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"> -->
-     <div class="hamburger">
-        <div class="line1"></div>
-        <div class="line2"></div>
-        <div class="line3"></div>
-    </div>
-    <!-- </button> -->
+    <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>
+    </button>
 
-    <!-- <div class="collapse navbar-collapse" id="navbarColor03"> -->
-		<!-- <div class="container"> -->
-    <!-- <div class="ml-auto mr-4"> -->
-      <ul >
+    <div class="collapse navbar-collapse" id="navbarColor03">
+		<div class="container">
+    <div class="ml-auto mr-4">
+      <ul class="navbar-nav">
         {% if page.active == "home" %}
-        <li class=" active"><a class="" href="/">Home</a></li>
+        <li class="nav-item active"><a class="nav-link" href="/">Home</a></li>
     {% else %}
-        <li class=""><a class="" href="/">Home</a></li>
+        <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
     {% endif %}
 
     {% if page.active == "join-us" %}
-        <li class=" active"><a class="" href="/join-us/index.html">Join Us</a></li>
+        <li class="nav-item active"><a class="nav-link" href="/join-us/index.html">Join Us</a></li>
     {% else %}
-        <li class=""><a class="" href="/join-us/index.html">Join Us</a></li>
+        <li class="nav-item"><a class="nav-link" href="/join-us/index.html">Join Us</a></li>
     {% endif %}
-		  <!-- </ul> -->
-		  <!-- </div> -->
-		<!-- <div class="navbar-header brandShow">
+		  </ul>
+		  </div>
+		<div class="navbar-header brandShow">
 		  <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>
 
-         <!-- <ul class="navbar-nav mr-auto ml-4"> -->
+         <ul class="navbar-nav mr-auto ml-4">
 
     {% if page.active == "updates" %}
-        <li class=" active"><a class="" href="/updates/index.html">Updates</a></li>
+        <li class="nav-item active"><a class="nav-link" href="/updates/index.html">Updates</a></li>
     {% else %}
-        <li class=""><a class="" href="/updates/index.html">Updates</a></li>
+        <li class="nav-item"><a class="nav-link" href="/updates/index.html">Updates</a></li>
     {% endif %}
 
     {% if page.active == "developers" %}
-        <li class=" active"><a class="" href="/developers/index.html">Developers</a></li>
+        <li class="nav-item active"><a class="nav-link" href="/developers/index.html">Developers</a></li>
     {% else %}
-        <li class=""><a class="" href="/developers/index.html">Developers</a></li>
+        <li class="nav-item"><a class="nav-link" href="/developers/index.html">Developers</a></li>
     {% endif %}			  
     </ul>
-		<!-- </div>
-	</div> -->
-
-
-<script>
-	const menu = document.querySelector('.hamburger');
-const list = document.querySelectorAll('li');
-
-menu.addEventListener('click', () => {
-    list.forEach(item => {
-        item.classList.toggle('on');
-    })
-    menu.classList.toggle('cross');
-})
-</script>
+		</div>
+	</div>
+  </nav>

assets/css/main.css

@@ -159,77 +159,3 @@ 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.on {
-    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;
-}