Horizontal Scroll

              
                <!-- ========== HEADER ========== -->
                <header id="header" class="header header-sticky-top"
                        data-hs-header-options='{
                          "fixMoment": 1000,
                          "fixEffect": "slide"
                        }'>
                  <div class="header-section">
                    <div id="logoAndNav" class="container">
                      <!-- Nav -->
                      <nav class="navbar navbar-expand py-0">
                        <!-- Logo -->
                        <a class="navbar-brand" href="#" aria-label="Front">
                          <img src="../../assets/svg/logos/logo.svg" alt="Logo">
                        </a>
                        <!-- End Logo -->

                        <!-- Navigation -->
                        <div class="navbar-nav-scroll navbar-body">
                          <ul class="navbar-nav my-0">
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#">About</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#">Services</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#">Works</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#">Blog</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#">Specialty</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#">Contacts</a>
                            </li>
                            <li class="nav-item navbar-nav-last-item">
                              <a class="btn btn-primary btn-sm transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Buy Now</a>
                            </li>
                          </ul>
                        </div>
                        <!-- End Navigation -->
                      </nav>
                      <!-- End Nav -->
                    </div>
                  </div>
                </header>
                <!-- ========== END HEADER ========== -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/hs-header/dist/hs-header.min.js"></script>

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