hamburger bar

css/mobile-first.css

@@ -218,9 +218,45 @@
   #section1 {
     margin: 50px;
   }
+  /* Hamburger Bar */
+  .container {
+    display: inline-block;
+    cursor: pointer;
 
+  }
+
+  .bar1, .bar2, .bar3 {
+    width: 35px;
+    height: 5px;
+    background-color: #333;
+    margin: 6px 0;
+    transition: 0.4s;
+  }
+
+  /* Rotate first bar */
+  .change .bar1 {
+    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
+    transform: rotate(-45deg) translate(-9px, 6px) ;
+  }
+
+  /* Fade out the second bar */
+  .change .bar2 {
+    opacity: 0;
+  }
+
+  /* Rotate last bar */
+  .change .bar3 {
+    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
+    transform: rotate(45deg) translate(-8px, -8px) ;
+  }
+  nav {
+    visibility: hidden;
+  }
 /*Desktop*/
-@media (min-width: 768px){
+@media (min-width: 768px) {
+  nav {
+    visibility: visible;
+  }
   div.centered {
     width:80%;
     margin: 0 auto;
@@ -252,7 +288,7 @@
   }
   ul {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
   }
   .half {
     width: 50%;
@@ -261,11 +297,14 @@
     margin: 0;
   }
   form {
-    margin-left: 50%;
+    margin:50px 0 0 35%;
   }
   #section1 {
     margin: none;
   }
+  .container {
+    visibility: hidden;
+  }
 
 }
   /* ==========================================================================

mobile-first.html

@@ -29,7 +29,12 @@
     <div class="centered">
         <div class="logo">
             <img src="img/logo_navbar_u70.png" alt="logo">
-        </div>
+        </div> 
+            <div class="container" onclick="myFunction(this)">
+                <div class="bar1"></div>
+                <div class="bar2"></div>
+                <div class="bar3"></div>
+            </div>
         <nav>
             <ul>
                 <li><a href="#">Features</a></li>

mobile-first.js

@@ -0,0 +1,3 @@
+function myFunction(x) {
+    x.classList.toggle("change");
+  }