Navigation Bar In Mobile Version

Question

When i want to use the mobile version (make the browser window smaller) and when i click on the hamburger menu when the list is in hide situation after you make the window bigger the navigation bar going to disappear at all. And as you know this is a problem. How can i fix it?!

jQuery(document).ready(function () {

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

                jQuery(".nav").slideToggle(400, function () {
                    jQuery(this).toggleClass("nav-expended").css('display')
                });

            });

        });

body {
    background-color:#e8e2e2;
}
.nav {
    position: relative;
    list-style: none;
    width: 100%;
    height: 40px;
    z-index: 100;
    vertical-align: top;
    margin: 0 auto;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    display:block;
    width: 250px;
    color:white;
    text-decoration:none;
    height:100%;
    text-align:center;
    z-index:100;
   font: bold 17px/40px arial, sans-serif;
   background-color:teal;
}
li {
    display: inline;
    float: left;
}
a:hover {
       border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}
.nav ul li:hover ul{
    display: block;
}
.nav ul ul {
    display: none;
    position: absolute;
    background-color:black;
}
li:hover > a {
  background: #222222;
}
li a:hover {
  background: #3a3a3a;
}
.nav ul ul li {
    display: block;
}
.nav ul ul li {
    display: block;
}

.menu-trigger {
    display:none;
}

div.nav-menu {
    display:none;
}

div.nav-expended {
    display:block;
}

@media screen and (max-width: 1050px) {
    div.nav ul li {
        float: none;
        border-bottom: 2px solid black;
    }

        div.nav ul li::after last-child {
            border-bottom: none;
        }
    .menu-trigger {
        display:block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" style="font-size:20px;" class="menu-trigger"><b>&#9776;</b></a>

    <div class="nav">
     <div id="nav_wrapper">
        <ul>
            <li><a href="#">Home</a></li><li>
            <a href="#">About</a></li><li>
            <a href="#">Contact Us</a></li><li>
            <a href="#">Social</a>
                <ul style="margin-right:600px;">
                    <li><a href="#">YouTube</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                </ul>
            </li>
        </ul>
     </div>
   </div>

Answer 1

Inside your media query, you need to make the nav always visible when the page is at the larger size

@media screen and (max-width: 1050px) {
    div.nav {
        display: block !important;
    }

}