Responsive Nav Menu Won't Display After Expanding Browser

Question

When my window hits 670px, the nav menu gets a css class display:none;. Then a drop down icon appears. The drop down icon has a slideToggle that displays the ul li navigation menu and that works. However, once the window expands again, the ul li is nowhere to be found. If anyone could help out then than would be amazing.

Here's the code.

<style>
body{
    margin:0px; 
    padding:0px;
}
.menu-trigger img{display: none;}
.header_background{
    background-image: url('backgrounddd.jpg');
    position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.clearfixone{
    margin: 0px;
    padding:0px;
    width:100%;
    overflow: hidden;
    border-bottom:1px solid black;

}
.divone{
    max-width: 995px;
    margin-left: auto;
    margin-right: auto;
    padding-top:0px;
    padding-bottom:0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border:1px solid red;
    overflow: hidden;


}
#logo{
    height:90px;
    padding:0px;
    margin: 0px;
    margin-top:5px;
}

.nav-menu ul li{
    list-style: none;
    display: inline-block;
    float: right;
    width: 120px;
    padding: 0px;
    margin:0px;
    text-align: center;
    border-right:2px solid #bfcec7;
    line-height: 30px;
}
li#middle{
    padding-left: 10px;
    padding-right:10px;
}
div.nav-expanded{
    display: block;
}
@media screen and (max-width:990px) {
    .nav-menu ul{
        padding:0px;
        width: 100%;
    }
    .nav-menu ul li{
    background-color:rgba(0, 0,0, 0.7);
    width: 100%;
    padding: 0px;
    margin:0px;
    text-align: center;
    border-right:none;
    border-top:1px solid white;
    padding-top:10px;
    padding-bottom: 10px;
    float: none;


}
.menu-trigger img{
    height: 25px;
    float: right;
    padding-right: 15px;
    padding-top: 15px;
    display:block;

}
.nav-menu ul{
    display: none;

}
div.nav-expanded{
    display: block;
}

}

</style>
<div class="clearfixone">
          <div class="divone">
          <span class="menu-trigger"><img class="dropdown"src="http://i.imgur.com/Y9huMMG.png"></span>
<div class="nav-menu">
    <ul class="menu">
            <li class="extra"><a href="#">Services Offered</a></li>
                <li class="extra"><a href="#">Learn More </a></li>
                <li><a href="#">About Us</a></li>
                <li id="middle"><a href="#">Request a Quote</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
</div>
    </div></div>

<script>
jQuery(document).ready(function() {

    jQuery(".menu-trigger").click(function() {

        jQuery(".nav-menu, ul").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('display', 'content');
        });

    });

});
</script>

Answer 1

Try putting a media-query with a min-width at the same screen width, to re-apply the display: block style back onto the nav menu.

@media screen and (min-width:990px){
    .nav-menu ul { display: block !important; }
}

@media screen and (max-width:990px) { 
    .nav-menu ul { display: none; }
}