Header Search Forms

Various search form controls and components within a navbar.

Search push from top

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

SCSS

SCSS-files of the component can be found here assets/scss/front/search-forms/