title: Remove Mobile-Menu Button from desktop site
body: <p>I'm working on a HTML site and adding a mobile menu. I was able to add the menu but having trouble with the button that opens that menu.  This is what I have. </p>
  
  <pre><code>&lt;a id="simple-menu" href="#sidr"&gt;
  &lt;img class="hidedesktop" src="img/menu-icon.png" alt="Menu"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And when I press the image it opens the menu.  I need it to remove this from the page on desktop and show on mobile. I've been doing some research and found that</p>
  
  <pre><code>display:none;
  </code></pre>
  
  <p>should work in the @media but I tried and wasn't able to set this up correctly. Can anyone tell me what I'm doing wrong? Below is my CSS for hide desktop.</p>
  
  <pre><code>.hidedesktop{
      display:block;
  }
  </code></pre>
  
  <p>and CSS for @media remove on desktop</p>
  
  <pre><code>/*@media only screen and (max-width: 768px) {
  .hidedesktop{
      display:block;
      }
  }
  @media only screen and (min-width: 768px) {
  .hidedesktop{
      display:none;
  }
      }
  }
  */
  </code></pre>
  
  <p>I would like to also hide the main menu on the mobile version but if I get help with this I think I'll figure that out.</p>