Why can't I get this Hamburger Nav work on my Local, but it works on Codepen?

I found this slide down menu on Codepen, https://codepen.io/roker2401993/pen/LNryKe and changed it so it would slide up from the bottom and then down (so I just reversed it) https://codepen.io/Qlutsz/pen/eYQeoPM

But when added it to my own HTML file;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="css/styles.css">
    <title>Hamburger Menu Tests</title>
</head>
<body>
    
    <div class="nav">
        <button type="button" title="Button" class="btn-nav">
            <span class="icon-bar top"></span>
            <span class="icon-bar middle"></span>
            <span class="icon-bar bottom"></span>
        </button>
    </div>
      
    <div class="nav-content hideNav hidden">
        
        <ul class="nav-list">
          <li class="nav-item"><a href="index.html" class="item-anchor">Home</a></li>
          <li class="nav-item"><a href="about.html" class="item-anchor">About</a></li>
          <li class="nav-item"><a href="projects.html" class="item-anchor">Projects</a></li>
          <li class="nav-item"><a href="contact.html" class="item-anchor">Contact</a></li>
        </ul>
        
        <div class="line-betwen"></div>
        
        <div class="social-links">
          <ul class="social-list">
            <li><a href="https://www.facebook.com/mitar.djakovic.7" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="https://rs.linkedin.com/in/mitar-djakovic-77490ab5" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="mailto:[email protected]" target="_blank" title="Email"><i class="fa fa-envelope-o"></i></a></li>
            <li><a href="https://github.com/roker93" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>
            <li><a href="https://codepen.io/roker2401993" target="_blank" title="CodePen"><i class="fa fa-codepen"></i></a></li>
          </ul>
        </div>
  
    </div>
<script src="js/burger.js"></script>
</body>
</html>

And this is the CSS

.social-links {
    text-align: center;
    position: relative;
    top: 130px;
  }
  
  .line-betwen {
    width: 15%;
    height: 3px;
    background-color: #F9B339;
    position: relative;
    left: 42.5%;
    top: 80px;
  }
  
  .social-list li{
    display: inline;
    text-align: center;
    font-size: 40px;
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .social-list a {
    color: #fff;
  }
  
  .social-list a:hover {
    color:#F9B339;
  }
  .nav {
    position: relative;
    width: auto;
    display: inline-block;
    border: none;
  }
  
  .btn-nav {
    position: fixed;
    top: 30px;
    left: 30px;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 99999;
  }
  
  .btn-nav:focus {
    outline: 0;
  }
  
  .icon-bar {
    display: block;
    margin: 6px 0;
    width: 35px;
    height: 5px;
    background-color: #F9B339;
  }
  
  .btn-nav:hover .icon-bar {
    background-color: #F9B339;
  }
  
  .nav-content {
    position: fixed;
    top: -100%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.9);
    display: block;
    height: 100%;
    z-index: 9;
  }
  
  .below-line {
    width: 15%;
    height: 3px;
    background-color: #F9B339;
    position: relative;
    left: 42.5%;
    top: 40px;
  }
  
  .nav-list {
    list-style: none;
    padding: 0;
    position: relative;
    top: 10%;
  }
  
  .item-anchor:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    left: 0;
    bottom: 0;
    z-index: 9;
    background: transparent;
   
  }
  
  .item-anchor {
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    position: relative;
    text-decoration: none;
    padding: 10px;
    letter-spacing: 15px;
  }
  
  .item-anchor:hover,
  .item-anchor:focus {
    color: #F9B339;
   
  }
  
  .item-anchor:hover:after,
  .item-anchor:focus:after{
    width: 100%;
    background: #F9B339;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
  
  .nav-item {
    margin: 40px auto;
    text-align: center;
  }
  
  .animated {
    display: block;
    margin: 0 auto;
  }
  
  .animated:hover .icon-bar,
  .animated:focus .icon-bar{
    background-color: #FCA311;
  }
  
  .animated:focus {
    cursor: pointer;
    z-index: 9999;
  }
  
  .middle {
    margin: 0 auto;
  }
  
  .icon-bar {
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    z-index: 999999;
  }
  
  .animated .icon-bar {
    z-index: 999999;
    background-color: #FCA311;
  }
  
  .animated .top {
    -webkit-transform: translateY(10px) rotateZ(45deg);
    -moz-transform: translateY(10px) rotateZ(45deg);
    -ms-transform: translateY(10px) rotateZ(45deg);
    -o-transform: translateY(10px) rotateZ(45deg);
    transform: translateY(10px) rotateZ(45deg);
  }
  
  .animated .bottom {
    -webkit-transform: translateY(-11px) rotateZ(-45deg);
    -moz-transform: translateY(-11px) rotateZ(-45deg);
    -ms-transform: translateY(-11px) rotateZ(-45deg);
    -o-transform: translateY(-11px) rotateZ(-45deg);
    transform: translateY(-11px) rotateZ(-45deg);
  }
  
  .animated .middle {
    width: 0;
  }
  
  @keyframes showNav {
    from {
      top: 100%;
    }
    to {
      top: 0;
    }
  }
  
  @-webkit-keyframes showNav {
    from {
      top: -100%;
    }
    to {
      top: 0;
    }
  }
  
  @-moz-keyframes showNav {
    from {
      top: -100%;
    }
    to {
      top: 0;
    }
  }
  
  @-o-keyframes showNav {
    from {
      top: -100%;
    }
    to {
      top: 0;
    }
  }
  
  .showNav {
    -webkit-animation: showNav 1s ease forwards;
    -moz-animation: showNav 1s ease forwards;
    -o-animation: showNav 1s ease forwards;
    animation: showNav 1s ease forwards;
  }
  
  @keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: 100%;
    }
  }
  
  @-webkit-keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: -100%;
    }
  }
  
  @-moz-keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: -100%;
    }
  }
  
  @-o-keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: -100%;
    }
  }
  
  .hideNav {
    -webkit-animation: hideNav 1s ease forwards;
    -moz-animation: hideNav 1s ease forwards;
    -o-animation: hideNav 1s ease forwards;
    animation: hideNav 1s ease forwards;
  }
  
  .hidden {
    display: none;
  }

And this is the little bit of JS (I am still learning JS)

$(window).load(function() {
    $(".btn-nav").on("click tap", function() {
      $(".nav-content").toggleClass("showNav hideNav").removeClass("hidden");
      $(this).toggleClass("animated");
    });
  });

I am not exactly sure what I am doing wrong, I did link the CSS and JS files within the HTML file.
I have checked everything a bunch of times, but I am not sure what I am missing, I was hoping maybe someone could please help me figure out why it works on Codepen, but not on my local (VSCode Live Server)

I have tried to create this effect on my local host (using VSCode Live Server), I liked the CSS and the JS. Not sure what I am doing wrong, the CSS is linked correctly because I did change the color of the hamburger "bars" with success.

When I click on the hamburger nav bars - nothing happens, at all. But on Codepen, it works correctly and how I want it to work. I just cannot seem to get it to work correctly on my local end.

(I apologize this is my first serious post on Stackoverflow asking for help, so if I did not do or say something correctly, please let me know)

Solution

The reason your code is not working locally is that you are not importing jQuery, which is imported in the CodePen.

I you want to look at all the scripts that are imported in a pen, you can look for them in the Settings popup.

And to fix your code you just need to import jQuery like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

You can add the script anywhere before this script <script src="js/burger.js"></script>

Final Code:

$(window).load(function() {
  $(".btn-nav").on("click tap", function() {
    $(".nav-content").toggleClass("showNav hideNav").removeClass("hidden");
    $(this).toggleClass("animated");
  });
});

.social-links {
  text-align: center;
  position: relative;
  top: 130px;
}

.line-betwen {
  width: 15%;
  height: 3px;
  background-color: #F9B339;
  position: relative;
  left: 42.5%;
  top: 80px;
}

.social-list li {
  display: inline;
  text-align: center;
  font-size: 40px;
  margin-left: 10px;
  margin-right: 10px;
}

.social-list a {
  color: #fff;
}

.social-list a:hover {
  color: #F9B339;
}

.nav {
  position: relative;
  width: auto;
  display: inline-block;
  border: none;
}

.btn-nav {
  position: fixed;
  top: 30px;
  left: 30px;
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 99999;
}

.btn-nav:focus {
  outline: 0;
}

.icon-bar {
  display: block;
  margin: 6px 0;
  width: 35px;
  height: 5px;
  background-color: #F9B339;
}

.btn-nav:hover .icon-bar {
  background-color: #F9B339;
}

.nav-content {
  position: fixed;
  top: -100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .9);
  display: block;
  height: 100%;
  z-index: 9;
}

.below-line {
  width: 15%;
  height: 3px;
  background-color: #F9B339;
  position: relative;
  left: 42.5%;
  top: 40px;
}

.nav-list {
  list-style: none;
  padding: 0;
  position: relative;
  top: 10%;
}

.item-anchor:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  left: 0;
  bottom: 0;
  z-index: 9;
  background: transparent;
}

.item-anchor {
  color: #fff;
  font-size: 30px;
  text-transform: uppercase;
  position: relative;
  text-decoration: none;
  padding: 10px;
  letter-spacing: 15px;
}

.item-anchor:hover,
.item-anchor:focus {
  color: #F9B339;
}

.item-anchor:hover:after,
.item-anchor:focus:after {
  width: 100%;
  background: #F9B339;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.nav-item {
  margin: 40px auto;
  text-align: center;
}

.animated {
  display: block;
  margin: 0 auto;
}

.animated:hover .icon-bar,
.animated:focus .icon-bar {
  background-color: #FCA311;
}

.animated:focus {
  cursor: pointer;
  z-index: 9999;
}

.middle {
  margin: 0 auto;
}

.icon-bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
  z-index: 999999;
}

.animated .icon-bar {
  z-index: 999999;
  background-color: #FCA311;
}

.animated .top {
  -webkit-transform: translateY(10px) rotateZ(45deg);
  -moz-transform: translateY(10px) rotateZ(45deg);
  -ms-transform: translateY(10px) rotateZ(45deg);
  -o-transform: translateY(10px) rotateZ(45deg);
  transform: translateY(10px) rotateZ(45deg);
}

.animated .bottom {
  -webkit-transform: translateY(-11px) rotateZ(-45deg);
  -moz-transform: translateY(-11px) rotateZ(-45deg);
  -ms-transform: translateY(-11px) rotateZ(-45deg);
  -o-transform: translateY(-11px) rotateZ(-45deg);
  transform: translateY(-11px) rotateZ(-45deg);
}

.animated .middle {
  width: 0;
}

@keyframes showNav {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}

@-webkit-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-moz-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-o-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

.showNav {
  -webkit-animation: showNav 1s ease forwards;
  -moz-animation: showNav 1s ease forwards;
  -o-animation: showNav 1s ease forwards;
  animation: showNav 1s ease forwards;
}

@keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: 100%;
  }
}

@-webkit-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-moz-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-o-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

.hideNav {
  -webkit-animation: hideNav 1s ease forwards;
  -moz-animation: hideNav 1s ease forwards;
  -o-animation: hideNav 1s ease forwards;
  animation: hideNav 1s ease forwards;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="css/styles.css">
  <title>Hamburger Menu Tests</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>

<body>

  <div class="nav">
    <button type="button" title="Button" class="btn-nav">
            <span class="icon-bar top"></span>
            <span class="icon-bar middle"></span>
            <span class="icon-bar bottom"></span>
        </button>
  </div>

  <div class="nav-content hideNav hidden">

    <ul class="nav-list">
      <li class="nav-item"><a href="index.html" class="item-anchor">Home</a></li>
      <li class="nav-item"><a href="about.html" class="item-anchor">About</a></li>
      <li class="nav-item"><a href="projects.html" class="item-anchor">Projects</a></li>
      <li class="nav-item"><a href="contact.html" class="item-anchor">Contact</a></li>
    </ul>

    <div class="line-betwen"></div>

    <div class="social-links">
      <ul class="social-list">
        <li><a href="https://www.facebook.com/mitar.djakovic.7" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://rs.linkedin.com/in/mitar-djakovic-77490ab5" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="mailto:[email protected]" target="_blank" title="Email"><i class="fa fa-envelope-o"></i></a></li>
        <li><a href="https://github.com/roker93" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>
        <li><a href="https://codepen.io/roker2401993" target="_blank" title="CodePen"><i class="fa fa-codepen"></i></a></li>
      </ul>
    </div>

  </div>
  <script src="js/burger.js"></script>
</body>

</html>