Classic Search

<!-- ========== HEADER ========== -->
<header id="header" class="header">
  <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 Classic -->
            <div class="hs-unfold position-static">
              <a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-icon rounded-circle mr-1" href="javascript:;"
                 data-hs-unfold-options='{
                  "target": "#searchClassic",
                  "type": "css-animation",
                  "animationIn": "slideInUp"
                 }'>
                <i class="fas fa-search"></i>
              </a>

              <div id="searchClassic" class="hs-unfold-content dropdown-menu right-0 left-auto shadow border-0 rounded-0 px-3 mt-0">
                <form class="input-group input-group-sm input-group-merge">
                  <input type="text" class="form-control" placeholder="Search Front" aria-label="Search Front">
                  <div class="input-group-append">
                    <div class="input-group-text">
                      <i class="fas fa-search"></i>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <!-- End Search Classic -->
          </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 ========== -->
Copy
<link rel="stylesheet" href="./assets/vendor/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
Copy
<!-- 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>
Copy