Header Search Forms

<!-- Search -->
<div id="searchPushTop" class="search-push-top">
  <div class="container position-relative">
    <div class="search-push-top-content">
      <!-- Close Button -->
      <div class="search-push-top-close-btn">
        <div class="hs-unfold">
          <a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-soft-secondary" href="javascript:;"
             data-hs-unfold-options='{
              "target": "#searchPushTop",
              "type": "jquery-slide"
             }'>
            <svg width="10" height="10" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
              <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
            </svg>
          </a>
        </div>
      </div>
      <!-- End Close Button -->

      <!-- Input -->
      <form class="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">
          <span class="h5">Quick Links</span>

          <div class="row">
            <!-- Nav Link -->
            <div class="col-6">
              <div class="nav nav-sm nav-x-0 flex-column">
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  Search Results List
                </a>
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  Search Results Grid
                </a>
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  About
                </a>
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  Services
                </a>
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  Invoice
                </a>
              </div>
            </div>
            <!-- End Nav Link -->

            <!-- Nav Link -->
            <div class="col-6">
              <div class="nav nav-sm nav-x-0 flex-column">
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  Profile
                </a>
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  User Contacts
                </a>
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  Reviews
                </a>
                <a class="nav-link" href="#">
                  <i class="fas fa-angle-right mr-1"></i>
                  Settings
                </a>
              </div>
            </div>
            <!-- End Nav Link -->
          </div>
        </div>

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

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

<!-- Search -->
<div class="hs-unfold">
  <a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
     data-hs-unfold-options='{
      "target": "#searchPushTop",
      "type": "jquery-slide"
     }'>
    <i class="fas fa-search"></i>
  </a>
</div>
<!-- End Search -->

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

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF UNFOLD
    // =======================================================
    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
  });
</script>

<!-- Search -->
<div class="hs-unfold mr-2">
  <a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
     data-hs-unfold-options='{
      "target": "#searchClassic",
      "type": "css-animation",
      "animationIn": "slideInUp"
     }'>
    <i class="fas fa-search la-lg"></i>
  </a>

  <div id="searchClassic" class="hs-unfold-content dropdown-menu w-100 border-0 rounded-0 px-3 mt-0" style="min-width: 400px;">
    <form class="input-group input-group-sm input-group-merge">
      <input type="text" class="form-control" placeholder="What do you want to learn?" aria-label="What do you want to learn?">
      <div class="input-group-append">
        <button type="button" class="btn">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </form>
  </div>
</div>
<!-- End Search -->

<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF UNFOLD
    // =======================================================
    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
  });
</script>

<!-- Search Content -->
<div id="searchSlideDown" class="hs-unfold-content dropdown-unfold search-slide-down">
  <form>
    <!-- Input Group -->
    <div class="input-group input-group-borderless search-slide-down-input bg-white rounded mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <i class="fas fa-search"></i>
        </span>
      </div>
      <input id="searchSlideDownControl" type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
      <div class="input-group-append">
        <a class="js-hs-search-unfold-invoker input-group-text" href="javascript:;"
           data-hs-unfold-options='{
             "target": "#searchSlideDown",
             "type": "css-animation",
             "animationIn": "fadeIn search-slide-down-show",
             "animationOut": "fadeOutUp",
             "cssAnimatedClass": null,
             "hasOverlay": true,
             "overlayClass": ".search-slide-down-bg-overlay",
             "overlayStyles": {
               "background": "rgba(33, 50, 91, .8)"
             },
             "duration": 800,
             "hideOnScroll": false
           }'>
          <i class="fas fa-times" aria-hidden="true"></i>
        </a>
      </div>
    </div>
    <!-- End Input Group -->

    <!-- Suggestions Content -->
    <div class="rounded bg-white search-slide-down-suggestions py-3 px-5">
      <ul class="list-unstyled list-sm-article mb-0">
        <li><a href="#">About Front</a></li>
        <li><a href="#">Getting Started</a></li>
        <li><a href="#">Documentation</a></li>
      </ul>
    </div>
    <!-- End Suggestions Content -->
  </form>
</div>
<!-- End Search Content -->

<!-- Search -->
<div class="position-relative">
  <a class="js-hs-search-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary search-slide-down-trigger" href="javascript:;" role="button"
     data-hs-unfold-options='{
       "target": "#searchSlideDown",
       "type": "css-animation",
       "animationIn": "fadeIn search-slide-down-show",
       "animationOut": "fadeOutUp",
       "cssAnimatedClass": null,
       "hasOverlay": true,
       "overlayClass": ".search-slide-down-bg-overlay",
       "overlayStyles": {
         "background": "rgba(33, 50, 91, .8)"
       },
       "duration": 800,
       "isFullWindow": true,
       "hideOnScroll": false
     }'>
    <i class="fas fa-search search-slide-down-trigger-icon"></i>
  </a>
</div>
<!-- End Search -->

<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF UNFOLD
    // =======================================================
    $('.js-hs-search-unfold-invoker').each(function() {
      var searchUnfold = new HSUnfold($(this), {
        afterOpen: function() {
          $('#searchSlideDownControl').focus();
        }
      }).init();
    });
  });
</script>