Mobile Navigation Menu with JQuery [SOLVED]

Mobile Navigation Menu with JQuery [SOLVED]

Hello!

I'm working on a website with mobile-first responsive design (just like everyone and their mother) and I have been struggling with the navigation bar. I tried following this tutorial but I've been having some problems.

The navigation menu does indeed hide the normal menu, and display the menu a element, but the menu image does not display, and when clicking on the a element, the menu does not appear; no Jquery seems to be loaded.

I've triple checked all my image and script srcs, and they all appear to be correct.

Here is my site. It is the first website I have ever created from scratch, and it is very much a work in progress. Feel free to point out any other obvious mistakes or nonsensicals that you are sure to find.

Thank you so much!

And for convenience,  here is my html, css, and jquery for said navigation bar:

HTML:
  1. <nav class = "clearfix">
  2.      <ul class = "clearfix">
  3.        <li><a href = "#">Contact</a></li>
  4.        <li><a href = "#">About</a></li>
  5.        <li><a href = "#">Services</a></li>
  6.        <li><a href = "#">Home</a></li>
  7.      </ul>
  8.      <a href = "#" id = "pull">Menu</a>
  9.    </nav>


CSS:


  1. nav {
  2.   position: relative;
  3.   float: center;
  4.   background-color: #70A5D0;
  5.   height: 3.5em;
  6. }
  7. nav ul {
  8.   display: none;
  9.   height: auto;
  10. }
  11. nav li {
  12.   display: inline;
  13. }
  14. nav li a {
  15.   font-size: 0.95em;
  16.   text-align: center;
  17.   color: #FFFFFF;
  18.   text-decoration: none;
  19.   padding: 1.25em 0;
  20.   width: 6.25em;
  21.   float: right;
  22.   display: inline-block;
  23. }
  24. nav li a:hover, nav a:active {
  25.   background: #1B80B7;
  26. }
  27. nav a#pull {
  28.   float: right;
  29.   display: block;
  30.   position: relative;
  31. }
  32. nav a#pull:after {
  33.       content:"";
  34.       background: url("images/logo/nav-icon.png") no-repeat;
  35.       width: 30px;
  36.       height: 30px;
  37.       display: inline-block;
  38.       position: absolute;
  39.       right: 15px;
  40.       top: 10px;
  41.     }
  42. @media screen and (min-width: 40.5em) {
  43.   nav {
  44.     top: -1.25;
  45.   }
  46.   nav ul {
  47.     display: inline;
  48.     padding-right: 6em;
  49.     text-align: center;
  50.   }
  51.   nav a#pull {
  52.     display: none;
  53.   }
  54. }


JQuery:


  1. $(document).ready(function() {
  2.   $('#comDiv').click(function() {
  3.     $('#comP').slideToggle('slow');
  4.   });
  5.   $('#resDiv').click(function() {
  6.     $('#resP').slideToggle('slow');
  7.     }):
  8. });


Thank you!!!