title: Hiding DIV if using mobile browser
body: <p>I'm having trouble manipulating my code to hide one specific DIV if the browser being used is a mobile device.</p>
  
  <p>Backstory: I'm building a custom WordPress template, and I have my design fully responsive, except for one specific DIV that I'm using some hover techniques that just don't look fancy using a touch screen, so I want to just hide that section if the user is using a mobile device.</p>
  
  <p>I did some searching and found this little nifty code that can detect if the browser is a mobile device (please feel free to point me towards a better code if one does exist, but nothing gigantic or anything), I currently just have it giving an alert box telling me if it's a mobile browser or not:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
      var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
      if (mobile) { alert("MOBILE DEVICE!!"); } else { alert("NOT A MOBILE DEVICE!!"); }
  &lt;/script&gt; 
  </code></pre>
  
  <p>Now all I'm wanting to do is have it essentially say:</p>
  
  <pre><code>if (mobile) { .navWrap {display: none;} }
  </code></pre>
  
  <p>I know that's not a functioning code, I did some testing using <code>getElementById</code> but couldn't figure out how to accomplish my goal. I did change my .navWrap class to #navWrap so it could be selected by <code>getElementById</code> but that didn't work either.</p>
  
  <p>So, any of you amazing geniuses out there able to help me out? Thanks!</p>