Header Search Forms

<!-- Search -->
<div id="searchPushTop" class="u-search-push-top">
  <div class="container position-relative">
    <div class="u-search-push-top__content">
      <!-- Close Button -->
      <button type="button" class="close u-search-push-top__close-btn"
              aria-haspopup="true"
              aria-expanded="false"
              aria-controls="searchPushTop"
              data-unfold-type="jquery-slide"
              data-unfold-target="#searchPushTop">
        <span aria-hidden="true">×</span>
      </button>
      <!-- End Close Button -->

      <!-- Input -->
      <form class="js-focus-state input-group">
        <input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
        <div class="input-group-append">
          <button type="button" class="btn btn-primary">Search</button>
        </div>
      </form>
      <!-- End Input -->

      <!-- Content -->
      <div class="row d-none d-md-flex mt-7">
        <div class="col-sm-6">
          <strong class="d-block mb-2">Quick Links</strong>

          <div class="row">
            <!-- List Group -->
            <div class="col-6">
              <div class="list-group list-group-transparent list-group-flush list-group-borderless">
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  Search Results List
                </a>
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  Search Results Grid
                </a>
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  About
                </a>
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  Services
                </a>
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  Invoice
                </a>
              </div>
            </div>
            <!-- End List Group -->

            <!-- List Group -->
            <div class="col-6">
              <div class="list-group list-group-transparent list-group-flush list-group-borderless">
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  Profile
                </a>
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  User Contacts
                </a>
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  Reviews
                </a>
                <a class="list-group-item list-group-item-action" href="#">
                  <span class="fas fa-angle-right list-group-icon"></span>
                  Settings
                </a>
              </div>
            </div>
            <!-- End List Group -->
          </div>
        </div>

        <div class="col-sm-6">
          <!-- Banner -->
          <div class="rounded u-search-push-top__banner">
            <div class="d-flex align-items-center">
              <div class="u-search-push-top__banner-container">
                <img class="img-fluid u-search-push-top__banner-img" src="../../assets/img/mockups/img3.png" alt="Image Description">
                <img class="img-fluid u-search-push-top__banner-img" src="../../assets/img/mockups/img2.png" alt="Image Description">
              </div>

              <div>
                <div class="mb-4">
                  <strong class="d-block mb-2">Featured Item</strong>
                  <p>Create astonishing web sites and pages.</p>
                </div>
                <a class="btn btn-xs btn-soft-success transition-3d-hover" href="index.html">Apply Now <span class="fas fa-angle-right ml-2"></span></a>
              </div>
            </div>
          </div>
          <!-- End Banner -->
        </div>
      </div>
      <!-- End Content -->
    </div>
  </div>
</div>
<!-- End Search -->

<!-- Search -->
<a class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button"
        aria-haspopup="true"
        aria-expanded="false"
        aria-controls="searchPushTop"
        data-unfold-type="jquery-slide"
        data-unfold-target="#searchPushTop">
  <span class="fas fa-search btn-icon__inner"></span>
</a>
<!-- End Search -->

<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      afterOpen: function () {
        $(this).find('input[type="search"]').focus();
      }
    });

    // initialization of forms
    $.HSCore.components.HSFocusState.init();
  });
</script>

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

  <!-- Input -->
  <div id="searchClassic" class="dropdown-menu dropdown-unfold" aria-labelledby="searchClassicInvoker">
    <form class="js-focus-state input-group px-3" style="width: 370px;">
      <input class="form-control" type="search" placeholder="Search Front">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button">Search</button>
      </div>
    </form>
  </div>
  <!-- End Input -->
</div>
<!-- End Search -->

<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      afterOpen: function () {
        $(this).find('input[type="search"]').focus();
      }
    });

    // initialization of forms
    $.HSCore.components.HSFocusState.init();
  });
</script>

<!-- Search Content -->
<div id="searchSlideDown" class="dropdown-unfold u-search-slide-down" aria-labelledby="searchSlideDownInvoker">
  <form>
    <!-- Input Group -->
    <div class="input-group input-group-borderless u-search-slide-down__input rounded mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span class="fas fa-search"></span>
        </span>
      </div>
      <input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
      <div class="input-group-append">
        <a class="input-group-text" href="javascript:;"
           aria-label="close"
           data-unfold-event="click"
           data-unfold-hide-on-scroll="false"
           data-unfold-target="#searchSlideDown"
           data-unfold-type="css-animation"
           data-unfold-animation-in="active"
           data-unfold-animation-out="fadeOutUp"
           data-unfold-delay="0"
           data-unfold-duration="800"
           data-unfold-overlay='{
            "className": "u-search-slide-down-bg-overlay",
            "background": "rgba(55, 125, 255, .1)",
            "animationSpeed": 400
           }'>
          <span class="fas fa-times" aria-hidden="true"></span>
        </a>
      </div>
    </div>
    <!-- End Input Group -->

    <!-- Suggestions Content -->
    <div class="rounded bg-white u-search-slide-down__suggestions py-3 px-5">
      <ul class="list-group list-group-flush list-group-borderless mb-0">
        <li><a class="list-group-item list-group-item-action" href="../pages/about-agency.html">About Front</a></li>
        <li><a class="list-group-item list-group-item-action" href="../../starter/index.html">Getting Started</a></li>
        <li><a class="list-group-item list-group-item-action" href="../../documentation/index.html">Documentation</a></li>
      </ul>
    </div>
    <!-- End Suggestions Content -->
  </form>
</div>
<!-- End Search Content -->

<!-- Search -->
<div class="position-relative">
  <a id="searchSlideDownInvoker" class="btn btn-xs btn-icon btn-text-secondary u-search-slide-down-trigger" href="javascript:;" role="button"
     aria-haspopup="true"
     aria-expanded="false"
     aria-controls="searchSlideDown"
     data-unfold-type="css-animation"
     data-unfold-hide-on-scroll="false"
     data-unfold-target="#searchSlideDown"
     data-unfold-animation-in="active"
     data-unfold-animation-out="fadeOutUp"
     data-unfold-delay="0"
     data-unfold-duration="800"
     data-unfold-overlay='{
      "className": "u-search-slide-down-bg-overlay",
      "background": "rgba(55, 125, 255, .1)",
      "animationSpeed": 400
     }'>
    <span class="fas fa-search btn-icon__inner u-search-slide-down-trigger__icon"></span>
  </a>
</div>
<!-- End Search -->

<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      afterOpen: function () {
        $(this).find('input[type="search"]').focus();
      }
    });
  });
</script>