jquery div doesn't show when toggle is closed

Question

I seem to be having a weird problem with the responsive CSS and the JQuery

1. When the window is resized to 600px
2. The hr(icon) is clicked to show Nav
3. Once hr is clicked again to hide the nav, and the window is resized, the nav isn't visible

if nav is visible and then resized > 600px nav stays visible throughout.

Is the problem something to do with the jquery code?

CODE HERE: https://jsfiddle.net/ag3tdeqe/

HTML:

<div class="container">
    <div class="leftmenu">
        <div class="logo">
            <img src="http://callmenick.com/theme/callmenick/img/logo.svg" alt="" />
        </div>
        <div class="icon">
            <hr/>
            <hr/>
            <hr/>
        </div>
        <div class="social"> 
            <span class="fa fa-facebook"></span>
            <span class="fa fa-instagram"></span>
            <span class="fa fa-twitter"></span>
            <span class="fa fa-youtube"></span>
            <span class="fa fa-vine"></span>
            <span class="fa fa-tumblr"></span>
            <span class="fa fa-google-plus"></span>
            <span class="fa fa-linkedin"></span>
        </div>
        <div class="nav">
            <ul class="navigation">
                <li> <a class="scroll" href="#home">Home</a>

                </li>
                <li> <a class="scroll" href="#videos">Videos</a>

                </li>
                <li> <a class="scroll" href="#gallery">Gallery</a>

                </li>
                <li> <a class="scroll" href="#about">About</a>

                </li>
                <li> <a class="scroll" href="#contact">Contact</a>

                </li>
            </ul>
        </div>
    </div>
</div>
</div>

CSS:

html, body {
    margin:0 auto;
    height: 100%;
}
.container {
    margin-left: 250px;
    height: 100%;
}
.leftmenu {
    float:left;
    width:250px;
    margin-left: -250px;
    background-color: #28aadc;
    position: fixed;
    height: 100%;
    overflow: auto;
}
.logo {
    display: block;
    width: 60px;
    text-align: center;
    margin:0 auto;
    margin-top: 30px;
    margin-bottom: 0px;
    height: 60px;
    -webkit-transition: .3s;
    transition: transform .3s;
}
.leftmenu .nav {
    position: relative;
    height: auto;
    padding-bottom: 60px;
    margin-top: -30px;
}
.leftmenu .nav ul {
    height: auto;
    width: auto;
    text-align: center;
}
.leftmenu .nav ul li {
    width: 100%;
}
.leftmenu .nav ul li > a {
    text-align: center;
    margin:0 auto;
    margin-top: 15px;
    width:80%;
    display: block;
    text-decoration: none;
    color:#00648c;
    font-family:'arkhip';
    font-size: 15px;
    padding:5px;
}
.leftmenu .nav ul li > a:hover {
    color:white;
}
@media screen and (max-width:767px) {
    .container {
        margin-left: 0px;
    }
    .leftmenu {
        width: 100%;
        margin-left: 0px;
        float:none;
        position:relative;
        height:80px;
    }
    .leftmenu > h1 {
        font-size: 80%;
    }
    .leftmenu .nav {
        display: block;
        width: 90%;
        padding:0px;
        margin-top: -35px;
        margin-right: 10px;
    }
    .leftmenu .logo {
        margin:0 auto;
        margin-top: 10px;
        margin-left: 20px;
        float:left;
    }
    .leftmenu .nav ul li {
        width:100px;
        display: inline-block;
    }
    .leftmenu .nav ul li > a {
        width:20px;
        margin:0 auto;
    }
}
@media screen and (max-width:600px) {
    .leftmenu {
        max-height: 80px;
        overflow: visible;
        margin-top: -10px;
    }
    .icon {
        display: block;
        width: 30px;
        float: right;
        margin:0 auto;
        padding:5px 10px 5px 10px;
        margin-right: 30px;
        margin-top: 20px;
    }
    .icon hr {
        width:40px;
        border:2px solid white;
        margin:0 auto;
    }
    .icon hr:not(:nth-of-type(1)) {
        margin-top: 10px;
    }
    .icon:hover {
        cursor: pointer;
    }
    .leftmenu .nav {
        display: none;
        position: absolute;
        left:0px;
        right:0px;
        float:none;
        margin:0 auto;
        width: 95%;
        margin-bottom: 10px;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.6);
        top:80px;
        padding-top: 10px;
        background-color: white;
        border-bottom: 1px solid #28aadc;
        border-left: 1px solid #28aadc;
        border-right: 1px solid #28aadc
    }
    .leftmenu .nav ul li {
        display: block;
        margin:0 auto;
    }
    .leftmenu .nav ul li:hover a {
        color:black;
    }
}

JQUERY:

$(".icon").click(function() {
    $(".leftmenu .nav").toggle(); 
});

$(".leftmenu .nav ul li > a").click(function() {
    $(".icon:visible").click();
});

Answer 1

The line

$(".leftmenu .nav").toggle();

adds

display: none

to your menu after the second click on the icon to hide it.

Use the following to remove it:

$(window).resize(function() {
  $(".leftmenu .nav").css("display", "");
});