fixed js and updated mobile nav

css/style.css

@@ -107,6 +107,39 @@ nav a:hover {
      outline: 1px solid #fff;
 }
 
+.bottom-padding {
+  padding-bottom: 20px
+}
+
+.menu-container {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+  background-color: #fff;
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+.bar3 {
+  margin-bottom: !important 0px;
+}
+
+.change .bar1 {
+  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+  transform: rotate(-45deg) translate(-9px, 6px);
+}
+
+.change .bar2 {opacity: 0;}
+
+.change .bar3 {
+  -webkit-transform: rotate(45deg) translate(-8px, -8px);
+  transform: rotate(45deg) translate(-8px, -8px);
+}
+
 .divider {
      color: #000;
      font-size: 200%;
@@ -555,10 +588,6 @@ footer {
           display: block;
      }
 
-     nav {
-          padding-bottom: 20px;
-     }
-
      ul {
           width: 100%;
           display: none;

index.html

@@ -25,7 +25,12 @@
           <nav>
                <div class="toggle">
                     <h1 class="navbarLogo">CrucialNET</h1>
-                    <i class="fa fa-bars menu" aria-hidden="true"></i>
+                    <div class="menu menu-container">
+                      <div class="bar1"></div>
+                      <div class="bar2"></div>
+                      <div class="bar3"></div>
+                    </div>
+                    <!-- <i class="fa fa-bars fa-spin menu" aria-hidden="true"></i> -->
                </div>
                <ul>
                     <li><a id="toAbout" class="link-underline-effect">About Me</a><span class="divider">|</span></li>

js/main.js

@@ -11,6 +11,8 @@ $(document).ready(function(){
 
      $('.menu').click(function() {
           $('ul').toggleClass('active');
+          $('.menu').toggleClass('change');
+          $('nav').toggleClass('bottom-padding')
      })
 
      $.getJSON("https://api.ipify.org?format=json",
@@ -19,6 +21,6 @@ $(document).ready(function(){
     })
 });
 
-$(window).load(function() {
+$(window).on('load', function() {
   $("body").removeClass("preload");
 });