Header Search Forms

<!-- Search -->
<div class="position-relative">
  <a class="btn btn-xs btn-icon btn-text-dark u-header__search-toggle" href="javascript:;" role="button"
     aria-haspopup="true"
     aria-expanded="false"
     aria-controls="search"
     data-unfold-target="#search"
     data-unfold-hide-on-scroll="false"
     data-unfold-type="css-animation"
     data-unfold-duration="300"
     data-unfold-delay="300"
     data-unfold-animation-in="slideInUp">
    <span class="fa fa-search btn-icon__inner"></span>
  </a>

  <!-- Input -->
  <form id="search" class="js-focus-state input-group form u-unfold u-header__search u-unfold--css-animation u-unfold--hidden">
    <input class="form-control form__input" type="search" placeholder="Search Space">
    <div class="input-group-addon u-header__search-addon p-0">
      <button class="btn btn-primary u-header__search-addon-btn" type="button">
        <span class="fa fa-search"></span>
      </button>
    </div>
  </form>
  <!-- End Input -->
</div>
<!-- End Search -->