Horizontal Scroll with Scroll nav

              
                <!-- ========== 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="js-scroll-nav navbar-nav my-0">
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#homeSection">Home</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#aboutSection">About</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#servicesSection">Services</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#worksSection">Works</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#blogSection">Blog</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#specialtySection">Specialty</a>
                            </li>
                            <li class="navbar-nav-item">
                              <a class="nav-link" href="#contactsSection">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>
                <script src="../../assets/vendor/appear.js"></script>
                <script src="../../assets/vendor/hs-scroll-nav/dist/hs-scroll-nav.min.js"></script>

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

                    // initialization of scroll nav
                    $('.js-scroll-nav').each(function () {
                      var scrollNav = new HSScrollNav($(this)).init();
                    });
                  });
                </script>
              
            

About content goes here...


Services content goes here...


Works content goes here...


Blog content goes here...


Specialty content goes here...


Contacts content goes here...