title: hide the overlay using media queries
body: <p>when we reduce the browser size to iphone screen a menu button appears.....
  when we click the button the overlay appears..........
  but the overlay appears when we increase the browser size....
  how to hide the over lay....
  rajdq0383@gmail.com</p>
  
  <p><a href="http://jsfiddle.net/QYvrt/17/" rel="nofollow">http://jsfiddle.net/QYvrt/17/</a>
  <a href="http://jsfiddle.net/QYvrt/17/embedded/result/" rel="nofollow">http://jsfiddle.net/QYvrt/17/embedded/result/</a></p>
  
  <pre><code>@media (max-width: 767px) {
  
  #rightSlider{
      border: 1px solid red;
  }
  
  #rightSlider{
              display:none !important;
            }
  #rightSlider{ 
              display:inherit !important;
            }
  
  }
  
  #slidenav{
              display:none !important;
            }
  #slidenav{ 
              display:inherit !important;
            }
  
  }
  </code></pre>