title: Search box in material design lite like google
body: <p>I, am using material design lite to create the nav bar. I, want to create the nav bar as in the below image.</p>
  
  <p><a href="https://i.stack.imgur.com/g7EPC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7EPC.png" alt="image of material design"></a></p>
  
  <p>I, tried some code and it somewhat good. But not as good as in the image.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  &lt;link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"&gt;
  &lt;script defer src="https://code.getmdl.io/1.3.0/material.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="demo-layout-waterfall mdl-layout mdl-js-layout"&gt;
  &lt;header class="mdl-layout__header mdl-layout__header--waterfall"&gt;
      &lt;!-- Top row, always visible --&gt;
      &lt;div class="mdl-layout__header-row"&gt;
          &lt;!-- Title --&gt;
          &lt;span class="mdl-layout-title"&gt;&lt;img src="~/images/transfeteBirdLogo.png" width="50" height="50" /&gt;&lt;/span&gt;
          &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
          &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                mdl-textfield--floating-label mdl-textfield--align-right"&gt;
              &lt;label class="mdl-button mdl-js-button mdl-button--icon"
                     for="waterfall-exp"&gt;
                  &lt;i class="material-icons"&gt;search&lt;/i&gt;
              &lt;/label&gt;
              &lt;div class="mdl-textfield__expandable-holder"&gt;
                  &lt;input class="mdl-textfield__input" type="text" name="sample"
                         id="waterfall-exp"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Bottom row, not visible on scroll --&gt;
      &lt;div class="mdl-layout__header-row"&gt;
          &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
          &lt;!-- Navigation --&gt;
          &lt;nav class="mdl-navigation"&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Electronics&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Cloths&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;men&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Women&lt;/a&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="mdl-layout__drawer"&gt;
      &lt;span class="mdl-layout-title"&gt;&lt;img src="~/images/transfeteBirdLogo.png" width="50" height="50" /&gt;&lt;/span&gt;
      &lt;nav class="mdl-navigation"&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;main class="mdl-layout__content"&gt;
      &lt;div class="page-content"&gt;@RenderBody()&lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p></p>
  
  <p>Can please someone help me to create the navbar as in the image using google material design </p>
  
  <p>My code has generated the nav bar as shown in below</p>
  
  <p><a href="https://i.stack.imgur.com/SL3cG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SL3cG.png" alt="my creted image"></a></p>