title: Javascript IF screen width then hide div
body: <p>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? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var searchEl = document.querySelector("#input");
  if ($(window).width() &gt; 960) {
  $(document).ready(function(){
      $("#hide").load(function(){
          $(".mobile-nav-hide").hide();
      });
      $("#toggle").click(function(){
          $(".mobile-nav-hide").toggle();
  
      });
  });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav-container"&gt;
     
     &lt;nav&gt;
      &lt;h4 class="mobile-nav" button id="toggle"&gt;Menu&lt;/h4&gt;
      &lt;div class="mobile-nav-hide"&gt;
      &lt;ul class="nav" class="search"&gt;
       &lt;li class="nav" style="margin-left: 0px;"&gt;&lt;a class="nav" href="#home"&gt;TEXT &amp;amp; TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT &amp;amp; TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT &amp;amp; TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT&lt;/a&gt;&lt;/li&gt;
       &lt;li class="nav"&gt;&lt;a class="nav" href="#home"&gt;TEXT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/nav&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE:</strong> 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 &lt; 900px and then have no effect then the width is over 900px.</p>