Header Search Forms

                      
                        <!-- Search -->
                        <div class="position-relative">
                          <a id="searchClassicInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button"
                             aria-controls="searchClassic"
                             aria-haspopup="true"
                             aria-expanded="false"
                             data-unfold-target="#searchClassic"
                             data-unfold-type="css-animation"
                             data-unfold-duration="300"
                             data-unfold-delay="300"
                             data-unfold-hide-on-scroll="true"
                             data-unfold-animation-in="slideInUp"
                             data-unfold-animation-out="fadeOut">
                            <span class="fas fa-search btn-icon__inner"></span>
                          </a>

                          <!-- Input -->
                          <div id="searchClassic" class="dropdown-menu dropdown-unfold" aria-labelledby="searchClassicInvoker">
                            <form class="js-focus-state input-group px-3" style="width: 370px;">
                              <input class="form-control" type="search" placeholder="Search MyTravel">
                              <div class="input-group-append">
                                <button class="btn btn-primary" type="button">Search</button>
                              </div>
                            </form>
                          </div>
                          <!-- End Input -->
                        </div>
                        <!-- End Search -->
                      
                    

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

                      
                        <!-- Search Content -->
                        <div id="searchSlideDown" class="dropdown-unfold u-search-slide-down" aria-labelledby="searchSlideDownInvoker">
                          <form>
                            <!-- Input Group -->
                            <div class="input-group input-group-borderless u-search-slide-down__input rounded mb-2">
                              <div class="input-group-prepend">
                                <span class="input-group-text">
                                  <span class="fas fa-search"></span>
                                </span>
                              </div>
                              <input type="search" class="form-control" placeholder="Search MyTravel" aria-label="Search MyTravel">
                              <div class="input-group-append">
                                <a class="input-group-text" href="javascript:;"
                                   aria-label="close"
                                   data-unfold-event="click"
                                   data-unfold-hide-on-scroll="false"
                                   data-unfold-target="#searchSlideDown"
                                   data-unfold-type="css-animation"
                                   data-unfold-animation-in="active"
                                   data-unfold-animation-out="fadeOutUp"
                                   data-unfold-delay="0"
                                   data-unfold-duration="800"
                                   data-unfold-overlay='{
                                    "className": "u-search-slide-down-bg-overlay",
                                    "background": "rgba(55, 125, 255, .1)",
                                    "animationSpeed": 400
                                   }'>
                                  <span class="fas fa-times" aria-hidden="true"></span>
                                </a>
                              </div>
                            </div>
                            <!-- End Input Group -->

                            <!-- Suggestions Content -->
                            <div class="rounded bg-white u-search-slide-down__suggestions py-3 px-5">
                              <ul class="list-group list-group-flush list-group-borderless mb-0">
                                <li><a class="list-group-item list-group-item-action" href="../pages/about-agency.html">About MyTravel</a></li>
                                <li><a class="list-group-item list-group-item-action" href="../../starter/index.html">Getting Started</a></li>
                                <li><a class="list-group-item list-group-item-action" href="../../documentation/index.html">Documentation</a></li>
                              </ul>
                            </div>
                            <!-- End Suggestions Content -->
                          </form>
                        </div>
                        <!-- End Search Content -->

                        <!-- Search -->
                        <div class="position-relative">
                          <a id="searchSlideDownInvoker" class="btn btn-xs btn-icon btn-text-secondary u-search-slide-down-trigger" href="javascript:;" role="button"
                             aria-haspopup="true"
                             aria-expanded="false"
                             aria-controls="searchSlideDown"
                             data-unfold-type="css-animation"
                             data-unfold-hide-on-scroll="false"
                             data-unfold-target="#searchSlideDown"
                             data-unfold-animation-in="active"
                             data-unfold-animation-out="fadeOutUp"
                             data-unfold-delay="0"
                             data-unfold-duration="800"
                             data-unfold-overlay='{
                              "className": "u-search-slide-down-bg-overlay",
                              "background": "rgba(55, 125, 255, .1)",
                              "animationSpeed": 400
                             }'>
                            <span class="fas fa-search btn-icon__inner u-search-slide-down-trigger__icon"></span>
                          </a>
                        </div>
                        <!-- End Search -->
                      
                    

                      
                        <!-- JS MyTravel -->
                        <script src="../../assets/js/components/hs.unfold.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();
                              }
                            });
                          });
                        </script>