CODEWITHSUNDEEP
htmlcssmaterialize
Jonnny
Jonnny

Reputation: 5039

Aligning search input in navbar with materialize

I'm trying to build a materialize navbar with some icons and a search bar all aligned. I'm close, but my input box when I click to search is positioned too high. I actually wanted to be able to allow a user to click the search icon and the bar stretch over the whole navbar. But I can't fix the position first.

I wrote a jsfiddle to illustrate my problem. You may need to stretch the result panel depending on your screen size. What do I need to change? Here is the HTML

$(document).ready(function() {
  $(".button-collapse").sideNav();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<nav class="nav-border">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li>
        <form>
          <div class="input-field">
            <input id="search" type="search" required>
            <label class="label-icon" for="search"><i class="material-icons ">search</i>
            </label>
            <i class="material-icons">close</i>
          </div>
        </form>
      </li>
      <li><a href="collapsible.html"><i class="material-icons">power_settings_new</i></a>
      </li>
    </ul>
    <ul class="side-nav" id="mobile-menu">
      <li><a href="collapsible.html"><i class="material-icons">power_settings_new</i></a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

Upvotes: 1

Views: 4985

Answers (1)

vanburen
vanburen

Reputation: 21663

You can use columns to position the logo, search bar, and right link inside the navbar then change the position property of your search components to fixed when the search is active.

This should get you started.

Working Example:

$(document).ready(function() {
  $(".button-collapse").sideNav();
});
.nav-wrapper .input-field input[type=search] {
  height: 64px;
}
.nav-wrapper input[type="search"]:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.input-field label {
  max-height: 64px;
}
.nav-wrapper input[type="search"]:focus ~ .label-icon.active {
  position: fixed;
  left: 10px;
}
.nav-wrapper input[type="search"]:focus ~ .closed {
  position: fixed;
  right: 10px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<nav class="nav-border">
  <div class="nav-wrapper">
    <div class="container">

      <div class="row">
        <div class="col s2">
          <a href="#" class="brand-logo">Logo</a>
          <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>

        <div class="col s8 hide-on-med-and-down">
          <form>
            <div class="input-field">
              <input id="search" type="search" required>
              <label class="label-icon" for="search"><i class="material-icons">search</i>
              </label>
              <i class="material-icons closed">close</i>
            </div>
          </form>
        </div>

        <div class="col s2 hide-on-med-and-down">
          <ul class="right">
            <li><a href="#"><i class="material-icons">power_settings_new</i></a>
            </li>
          </ul>
        </div>
      </div>

      <ul class="side-nav" id="mobile-menu">
        <li><a href="#"><i class="material-icons">power_settings_new</i></a>
        </li>
      </ul>

    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

Upvotes: 4

Related Questions