jquery - ナビゲーションメニューレスポンシブ

Question

ウェブサイトをレスポンシブにして、ハンバーガーのロゴをクリックするとナビゲーション メニューが表示されるようにしようとしていますが、クリックしても表示されません。何も下にスクロールしません。私が間違っていることを理解しないでください。これは私がやったことです：

 <script>
     $(document).ready(function (){
         $('#nav-btn').on("click", function() {
            $('#main-nav').slideToggle("slow");
            $(window).resize(function() {
                if($(window).width() > 1000) {
                    $("#main-nav").removeAttr("style");
                }
            });
         });
    });
    </script>


<span class="nav-btn"></span>
 <nav id="main-nav">
    <ul>
        <li><a href="#home" class="scroll">HOME</a></li>
        <li><a href="#about" class="scroll">ABOUT</a></li>
        <li><a href="#portfolio" class="scroll">PORTFOLIO</a></li>
        <li><a href="#contact" class="scroll">CONTACT</a> </li>                  </ul>
 </nav> 

CSS:

@media screen and (max-width: 1000px) {

 #main-nav {
    text-align: left;
    display: none;
 }

 #main-nav li {
    display: block;
    border-bottom: 5px #565656 solid;
    padding: 5px 0 5px 0;
 }

 #main-nav li:last-child {
    border-bottom: none;
 }

 span.nav-btn {
    display: block;
    color: #333;
    font-size: 40px;
    text-align: center;
    cursor: pointer;
    width: 5%;
    float: left;
    overflow: hidden;
    margin: auto;
    padding-left: 2em;
 }

 .nav-btn:before {
    content: url("hamburger.png");
 } 

}