Search box in material design lite like google

Question

I, am using material design lite to create the nav bar. I, want to create the nav bar as in the below image.

I, tried some code and it somewhat good. But not as good as in the image.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
    <!-- Top row, always visible -->
    <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
              mdl-textfield--floating-label mdl-textfield--align-right">
            <label class="mdl-button mdl-js-button mdl-button--icon"
                   for="waterfall-exp">
                <i class="material-icons">search</i>
            </label>
            <div class="mdl-textfield__expandable-holder">
                <input class="mdl-textfield__input" type="text" name="sample"
                       id="waterfall-exp">
            </div>
        </div>
    </div>
    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation -->
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Electronics</a>
            <a class="mdl-navigation__link" href="">Cloths</a>
            <a class="mdl-navigation__link" href="">men</a>
            <a class="mdl-navigation__link" href="">Women</a>
        </nav>
    </div>
</header>
<div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>
    <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
    </nav>
</div>
<main class="mdl-layout__content">
    <div class="page-content">@RenderBody()</div>
</main>

Can please someone help me to create the navbar as in the image using google material design

My code has generated the nav bar as shown in below

Answer 1

HTML

<header class="mdl-layout__header mdl-layout__header--waterfall">
        <!-- Top row, always visible -->
        <div class="mdl-layout__header-row mdl-layout__header">
            <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>

            <!-- Displayed on Computer and Tablet -->
            <!-- Search -->
            <div class="mdh-expandable-search mdl-cell--hide-phone">
                <form action="#">
                    <input type="text" placeholder="Search for Product , Brands ..">
                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688">
                        <i class="material-icons">search</i>
                    </button>

                </form>
            </div>


            <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"></div>
            <div class="mdl-cell--hide-tablet mdl-cell--hide-desktop mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                <label class="mdl-button mdl-js-button mdl-button--icon"
                       for="waterfall-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample"
                           id="waterfall-exp">
                </div>
            </div>

            <!-- Buttons -->
            <!-- Right aligned menu below button -->
            <button id="demo-menu-lower-right"
                    class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">more_vert</i>
            </button>

            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                for="demo-menu-lower-right">
                <li class="mdl-menu__item">Mobile App</li>
                <li class="mdl-menu__item">Customer Care</li>
                <li class="mdl-menu__item">Track Order</li>
                <li class="mdl-menu__item">Log in</li>
            </ul>
        </div>
        <!-- Bottom row, not visible on scroll -->
        <div class="mdl-layout__header-row" style="height: 35px;">
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Electronics</a>
                <a class="mdl-navigation__link" href="">Cloths</a>
                <a class="mdl-navigation__link" href="">men</a>
                <a class="mdl-navigation__link" href="">Women</a>
            </nav>
        </div>
    </header>

CSS

.mdh-expandable-search {
    margin: 0 50px;
    align-items: center;
    justify-content: center;
}

    .mdh-expandable-search form {
        max-width: 700px;
    }

    .mdh-expandable-search,
    .mdh-expandable-search form,
    .mdh-expandable-search input {
        /* Cross browser flex-grow */
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

        .mdh-expandable-search,
        .mdh-expandable-search form {
            /* Cross browser inline-flex */
            display: -webkit-inline-box;
            display: -webkit-inline-flex;
            display: -moz-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
        }



            .mdh-expandable-search input {
                outline: none;
                border: none;
                font-size: 16px;
                color: #131212;
                /* background-color: #fcfdfd; */
                padding: 0px 35px 0px 10px;
                height: 40px;
                line-height: 40px;
                border-radius: 5px 5px 5px 5px;
                -moz-border-radius: 5px 5px 5px 5px;
                -webkit-border-radius: 5px 5px 5px 5px;
            }

Answer 2

.mdl-layout__header-row,
.mdl-textfield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: blue;
}

.mdl-layout__header-row:nth-child(1) {
  border-bottom: thin solid lightgray;
  padding-right: 2em;
}

.mdl-layout__header-row:nth-child(2) {
  padding: .5em 2em .5em 0;
}

.mdl-button {
  background-color: orange;
  color: white;
  padding: .4em
}

.mdl-textfield__input {
  padding: .5em;
}

.mdl-navigation a {
  color: white;
}

<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--waterfall">
    <!-- Top row, always visible -->
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title"><img src="http://placehold.it/50" width="50" height="50" /></span>
      <div class="mdl-layout-spacer"></div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
              mdl-textfield--floating-label mdl-textfield--align-right">

        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
        </div>
        <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
                <i class="material-icons">search</i>
            </label>
      </div>
    </div>
    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Electronics</a>
        <a class="mdl-navigation__link" href="">Cloths</a>
        <a class="mdl-navigation__link" href="">men</a>
        <a class="mdl-navigation__link" href="">Women</a>
      </nav>
    </div>
  </header>

  <main class="mdl-layout__content">
    <div class="page-content"></div>
  </main>