title: jQuery mobile search input in header (overtop/overlay of header) with fiddle
body: <p>Hi I am currently working on a jQuery mobile project. In the header I have an icon for panel on left, center is a title and right is a search icon.</p>
  
  <p>The search icon currently reveals a search input, which works great. The Input is revealed above header and everything else is pushed down.</p>
  
  <p>My question is how can I adjust this so the search input reveals within the header (like an overlay) as opposed to above the header. 
  Along with a close button (X) to return to default header? </p>
  
  <pre><code>&lt;body&gt;
  
  
  &lt;div data-role="page" data-theme='d'&gt;
  
      &lt;div data-display="push" data-role="panel" data-theme="c" id=
      "sidebar"&gt;
          &lt;ul data-icon="false" data-inset="false" data-role="listview"&gt;
  
              &lt;li&gt;
                  &lt;a data-ajax="false" href="index.html"&gt;&lt;i class=
                  'fa fa-home fa-fw'&gt;&lt;/i&gt;Home&lt;/a&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
  
      &lt;div &gt;
   &lt;form data-ajax="false" action="search.html" data-theme="b" id="searchform" name="searchform"&gt;
  
   &lt;input data-clear-btn="true" autocomplete="off" autocorrect="off" autocapitalize="off" data-role="none" id=
              "" name="q" placeholder="Search..." type=
              "text"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  
      &lt;div data-role="header" data-tap-toggle="true" data-theme='b'&gt;
  
           &lt;a data-role="none" href='#sidebar'&gt;&lt;img alt="sidebar" id="header-menu-icon" src="images/menu-icon.png"&gt;&lt;/a&gt;
  
     &lt;h1 class="header-title"&gt;Hvac Techpedia&lt;/h1&gt;
  
       &lt;a data-role="none" href='#' id="a-search"&gt;&lt;img alt="search" id="header-search-icon" src="images/search-icon.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here is a fiddle of the CSS, HTML and JS. Click the search bar on the top right. </p>
  
  <p><a href="http://jsfiddle.net/xstrikax/cj6nc8xa/4/" rel="nofollow">http://jsfiddle.net/xstrikax/cj6nc8xa/4/</a></p>
  
  <p>Been tinkering around but cant seem to figure it out. Adding <code>data-positon="fixed"</code> to header makes the bar (search input) appear below header.</p>
  
  <p>This is somewhat of an example of what I am looking to do:</p>
  
  <p><a href="http://www.style.com/magazine" rel="nofollow">http://www.style.com/magazine</a></p>
  
  <p>Using JQM 1.4.5 &amp; Jquery 1.11.1.</p>
  
  <p>Any help or suggestions would be great! Thanks!!!!</p>