Javascript IF screen width then hide div

Trying to get a result whereby if the window size is less that 900px then the items hide themselves on document load. However running into trouble as the code I know works when not in an IF wont work when it is enclosed in an IF statement?

var searchEl = document.querySelector("#input");
if ($(window).width() > 960) {
$(document).ready(function(){
    $("#hide").load(function(){
        $(".mobile-nav-hide").hide();
    });
    $("#toggle").click(function(){
        $(".mobile-nav-hide").toggle();

    });
});
}

h4.mobile-nav {
    font-family: GillSansMTStd-Medium;
    color: #5F5A51;
    display: block;
    text-align: center;
    padding: 15px 0px;
    text-decoration: none;
}

h4.mobile-nav:hover {
    background-color: #7BAF8A;
}

@media (min-width: 900px) {
h4.mobile-nav {
    display: none;
}
}

@media (min-width: 1024px) {
h4.mobile-nav {
    display: none;
}
}
nav {
    margin: 0 auto;
    padding: 0px;
    width: 0 auto;
}

@media (min-width: 900px) {
nav {
    margin: 0 auto;
    padding: 0px;
    width: 851px;
}
}

@media (min-width: 1024px) {
nav {
    margin: 0 auto;
    padding: 0px;
    width: 924px;
}
}

ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #E8DDBF /*#E8DFCE*/; 
}

@media (min-width: 900px) {
ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #E8DDBF /*#E8DFCE*/; 
    height: 35px;
}
}

@media (min-width: 1024px) {
ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #E8DDBF /*#E8DFCE*/; 
    height: 40px;
}
}

li.nav {
    width: auto;
}

@media (min-width: 900px) {
li.nav {
    width: auto;
    float: left;
    margin-left: 15px;
}
}

@media (min-width: 1024px) {
li.nav {
    width: auto;
    float: left;
    margin-left: 15px;
}
}

li.nav a.nav {
    font-family: GillSansMTStd-Medium;
    font-size: 14px;
    color: #5F5A51;
    display: block;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
}

@media (min-width: 900px) {
li.nav a.nav {
    font-family: GillSansMTStd-Medium;
    font-size: 12px;
    color: #5F5A51;
    display: block;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
}
}

@media (min-width: 1024px) {
li.nav a.nav {
    font-family: GillSansMTStd-Medium;
    font-size: 14px;
    color: #5F5A51;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
}




li.nav a.nav:hover:not(.active) {
    background-color: #7BAF8A;
    color: #FFFFFF;
}

<div id="nav-container">
                        
                        <nav>
                                <h4 class="mobile-nav" button id="toggle">Menu</h4>
                                <div class="mobile-nav-hide">
                                <ul class="nav" class="search">
                                        <li class="nav" style="margin-left: 0px;"><a class="nav" href="#home">TEXT &amp; TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT &amp; TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT &amp; TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT</a></li>
                                        <li class="nav"><a class="nav" href="#home">TEXT</a></li>
                                </ul>
                        </nav>
                </div>

UPDATE: I don't seem to have made it clear that the page needs to hide the li elements under the Menu item, for use in the hide/show, when the width < 900px and then have no effect then the width is over 900px.