title: Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution
body: <p>I have a website using css media queries to detect browser resolution and modify my site accordingly.</p>
  
  <p>I have run into a slight problem with my main navigation menu. There are a number of pages on my site where I would like to have my main navigation hidden on load for mobile resolutions, but displayed on desktop resolutions.</p>
  
  <p>This seems like a simple enough task to accomplish with css, but unfortunately for me, it is not. I am unable to use both <code>display:none;</code> and <code>visibility:hidden;</code> because when my menu detects on load that it is hidden, it sets it's height to 0, and will not change.</p>
  
  <p>Here is a stack overflow page reference:
  <a href="https://stackoverflow.com/questions/16743611/setting-a-div-to-displaynone-using-javascript-or-jquery">Setting a div to display:none; using javascript or jQuery</a></p>
  
  <p>Ultimately, I the only option I found that would hide my menu on load, while still allowing the menu to correctly calculate it's height was the following bit of jQuery.</p>
  
  <pre><code>$(document).ready(function () {
      $(".hide-menu").hide();
      var $drillDown = $("#drilldown");
  });
  </code></pre>
  
  <p>Now, this solution is working for pages that I would like to have the menu initially hidden on load for all screen resolutions. However, I have a number of pages on which I would like to have the menu hidden initially hidden on load for mobile, but displayed on desktop.</p>
  
  <p>I have attempted to recreate this scenario in a jsfiddle: <a href="http://jsfiddle.net/WRHnL/15/" rel="nofollow noreferrer">http://jsfiddle.net/WRHnL/15/</a></p>
  
  <p>As you can see in the fiddle, the menu system has big issue with not being displayed on page load. Does anyone have any suggestions on how I might accomplish this task?</p>