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...