title: issue with input button
body: <p>I have this search button that open a top bar on screen width less than 1080px but I have a problem on mobile with it... touching the button on mobile, the bar it doesn't appear here you have an example <a href="http://cosmoscreativeagency.com/alanic/index.html" rel="nofollow noreferrer">http://cosmoscreativeagency.com/alanic/index.html</a></p>
  
  <p>this is the functionality: </p>
  
  <ul>
  <li>on screen > 1080px: the white line appears clicking on the search button</li>
  <li>on screen &lt;= 1080px: the white top search bar appears clicking on the search button and the white line is set as display: none</li>
  </ul>
  
  <p>snippet below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>toggle();
  window.onresize = function() {
      toggle();
  }
  function toggle() {
   var searchTop = document.getElementById('demo-1'); 
   if (window.innerWidth &lt;= 1080) {
    
    document.getElementById('demo-2').addEventListener('click', function(evt) {
        
        document.getElementById('demo-1').style.top = '0px';
    }, true);
  
    document.getElementById('demo-3').addEventListener('blur', function(evt) {
              document.getElementById('demo-1').style.top = '-60px';
    }, true);
  
   } else if (window.innerWidth &gt; 1080) {
    document.getElementById('demo-1').style.display = 'none';
   }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background-color: black;
  }
  #demo-1 {
    position: absolute;
    width: 100%;
    height: 60px;
    z-index: 300;
    transition: all 0.5s ease;
    top: -60px; }
  #demo-1 input[type="search"] {
    background-color: #ffffff;
    padding-left: 50px;
    padding-right: 40px;
    width: 100%;
    height: 60px;
    color: #000000;
    border: none;
    opacity: 0.9;}
  .subheader {
    position: absolute;
    top: 120px;
    width: 100%; }
  #demo-2 {
    position: relative;
    display: inline-block;
    padding-right: 50px;
    float: right;
    z-index: 300; }
  #demo-2 input[type="search"] {
    background: url(http://localhost/alanic/images/searchbutton.png) no-repeat 9px center;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    width: 20px;
    cursor: pointer;
    border: none;
    transition: all 0.5s; }
  #demo-2 input[type="search"]:hover {
    background-color: none; }
  #demo-2 input[type="search"]:focus {
    width: 200px;
    padding-left: 40px;
    background-color: none;
    border-bottom: 1px solid #fff;
    color: #fff;
    cursor: auto; }
  @media screen and (max-width: 1080px) {
   #demo-2 input[type="search"]:focus {
      display: none; } }
   #demo-2 input:-moz-placeholder {
    color: transparent; }
   #demo-2 input::-webkit-input-placeholder {
    color: transparent; }
   #demo-2 input:focus::-webkit-input-placeholder {
    color: #fff; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="demo-1"&gt;
    &lt;input id="demo-3" type="search" name="buscar" placeholder="Search"&gt;
  &lt;/form&gt;   
  &lt;div class="subheader"&gt;
    &lt;form id="demo-2"&gt;
      &lt;input type="search" name="search" placeholder="Search"&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>