Push to Top Search

              
                <!-- ========== HEADER ========== -->
                <header id="header" class="header">
                  <!-- Search -->
                  <div id="searchPushTop" class="search-push-top">
                    <div class="container position-relative">
                      <div class="search-push-top-content pt-3">
                        <!-- 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 mt-2 mr-2" href="javascript:;"
                               data-hs-unfold-options='{
                                "target": "#searchPushTop",
                                "type": "jquery-slide",
                                "contentSelector": ".search-push-top"
                               }'>
                              <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="javascript:;">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 -->

                  <div class="header-section">
                    <div id="logoAndNav" class="container">
                      <!-- Nav -->
                      <nav class="js-mega-menu navbar navbar-expand-lg">
                        <div class="navbar-nav-wrap">
                          <!-- Logo -->
                          <a class="navbar-brand navbar-nav-wrap-brand" href="#" aria-label="Front">
                            <img src="../../assets/svg/logos/logo.svg" alt="Logo">
                          </a>
                          <!-- End Logo -->

                          <!-- Secondary Content -->
                          <div class="navbar-nav-wrap-content text-center">
                            <!-- 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",
                                  "contentSelector": ".search-push-top"
                                 }'>
                                <i class="fas fa-search"></i>
                              </a>
                            </div>
                            <!-- End Search -->
                          </div>
                          <!-- End Secondary Content -->

                          <!-- Responsive Toggle Button -->
                          <button type="button" class="navbar-toggler navbar-nav-wrap-toggler btn btn-icon btn-sm rounded-circle"
                                  aria-label="Toggle navigation"
                                  aria-expanded="false"
                                  aria-controls="navBar"
                                  data-toggle="collapse"
                                  data-target="#navBar">
                            <span class="navbar-toggler-default">
                              <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                              </svg>
                            </span>
                            <span class="navbar-toggler-toggled">
                              <svg width="14" height="14" 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>
                            </span>
                          </button>
                          <!-- End Responsive Toggle Button -->

                          <!-- Navigation -->
                          <div id="navBar" class="collapse navbar-collapse navbar-nav-wrap-collapse">
                            <div class="navbar-body header-abs-top-inner">
                              <ul class="js-scroll-nav navbar-nav header-navbar-nav">
                                <li class="header-nav-item active">
                                  <a class="nav-link header-nav-link" href="#">Home</a>
                                </li>
                                <li class="header-nav-item">
                                  <a class="nav-link header-nav-link" href="#">About</a>
                                </li>
                                <li class="header-nav-item">
                                  <a class="nav-link header-nav-link" href="#">Pricing</a>
                                </li>
                                <li class="header-nav-item">
                                  <a class="nav-link header-nav-link" href="#">Events</a>
                                </li>
                                <li class="header-nav-item">
                                  <a class="nav-link header-nav-link" href="#">Hiring</a>
                                </li>
                                <li class="header-nav-item">
                                  <a class="nav-link header-nav-link" href="#">Contacts</a>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <!-- End Navigation -->
                        </div>
                      </nav>
                      <!-- End Nav -->
                    </div>
                  </div>
                </header>
                <!-- ========== END HEADER ========== -->
              
            
              
                <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.css">
                <link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/hs-header/dist/hs-header.min.js"></script>
                <script src="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
                <script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF HEADER
                    // =======================================================
                    var header = new HSHeader($('#header')).init();


                    // INITIALIZATION OF HSMEGAMENU COMPONENT
                    // =======================================================
                    var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();


                    // INITIALIZATION OF UNFOLD
                    // =======================================================
                    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
                  });
                </script>