title: CSS Nav menu not clickable on mobile devices
body: <p>I am trying to help out a friend that made a menu system and it works great in a browser but does not work on a phone. They are using a image as the "menu" button and when I hover over it, the menu drops down as expected. </p>
  
  <p>However, on my phone, i can't really hover over it so it doesn't do anything. If i click it, it also does not do anything. I am figuring this is something silly and easy on my part but I cannot figure it out for the life of me. I know CSS  enough to get most things working but not very good with responsive design yet.</p>
  
  <p>I am sure the issue is in the @media query but I am not seeing what is done wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 680px) {
    #navbar {
      overflow: visible!important;
    }
    #navwrapper {
      position: fixed;
      top: 0;
      left: 20px;
      width: 150px;
      height: 50px;
      background: url('menuicon.png') top left no-repeat;
      overflow: visible;
    }
    #navwrapper ul {
      display: none;
      width: auto;
      max-width: 310px;
      background: #333;
      margin: 50px 0 0 0;
      box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
      position: relative;
      top: 0;
      left: 0;
    }
    #navwrapper li {
      display: block;
      height: 30px;
      line-height: 30px;
      float: none;
      clear: both;
      overflow: hidden;
      border: none;
      z-index: 200;
      transition: none;
    }
    #navwrapper ul li:first-child {
      padding: 0!important;
    }
    #navwrapper a:link,
    #navbar a:visited,
    #navbar a:active {
      padding: 0 25px;
      font-size: 13px;
      line-height: 30px;
      display: inline;
      color: #fff;
      font-size: 15px;
      letter-spacing: 0.5px;
      text-shadow: 0px 2px 5px #333;
      width: 100%;
      float: none;
      transition: none;
    }
    #navbar li:hover,
    #navbar li:focus,
    #navbar a:hover,
    #navbar a:focus {
      background: #111;
    }
    #navwrapper:hover {
      width: auto;
      height: auto;
      overflow: visible;
    }
    #navwrapper:hover ul,
    #navwrapper ul:hover {
      display: block;
      height: auto;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="navbar"&gt;
    &lt;div id="navwrapper"&gt;
      &lt;ul class="menu"&gt;
        &lt;li id="home"&gt;&lt;a href="index.html"&gt;Index&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="about"&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="link1"&gt;&lt;a href="link1.html"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any thoughts or pokes in the right direction would be greatly appreciated.</p>