Header Search Forms

Various search form controls and components within a navbar.

Search push from top

                  
                    <!-- 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>