Drop Down Hamburger Menu Responsive

Question

I ve created a drop down navigation menu with the famous hamburger icon. It drops down perfectly when the page is loaded and/or before scrolling the page down, but if I do scroll down and then scroll back up, when I click on the icon it cuts the nav ul lists in half, not showing anymore what it did before the scrolling. I am not sure why it does that.

This is the script:

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

This is the HTML (inside the header):

<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>  

This is the CSS:

#main-nav {
    text-align: center;
    display: none;
    background-color: #F1F1F1;
}

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

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

#main-nav ul li {
    font-size: 1em;
    font-family: 'montserratregular';
    text-align: left;
}

.nav-btn {
    display: block;
    background-color: #F1F1F1;
    color: #333;
    font-size: 40px;
    text-align: left;
    cursor: pointer;
}

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

Answer 1

You have a javascript that is applying a height of 130px on the #headwrapper div.

<div id="headwrapper" class="" style="height: 130px;">

When i take that 130px off the menu acts normally. it seems to be adding it onscroll though so when i scroll back up to the top the javascript enables it again. try changing that to height: auto or instead of setting a fixed height try setting it as a height: auto; max-height: 1000px; height: auto; max-height: 1000px; or something like that. this should take care of the issue you are having.

EDIT*: instead of changing the height inline like you have, i would suggest to put a max-height: 75px; on your .small and adding a height: auto; max-height: 1000px; height: auto; max-height: 1000px; on your #headwrapper . if you use this with a css-transition it should give you the same effect you have now.