Starter
Header Layouts
Header default: One page navigation
<!-- ========== HEADER ========== -->
<header id="header" class="u-header u-header--sticky-top"
data-header-fix-moment="500"
data-header-fix-effect="slide">
<div class="u-header__section">
<div id="logoAndNav" class="container">
<!-- Nav -->
<nav class="navbar navbar-expand-md u-header__navbar u-header__navbar--no-space">
<!-- Logo -->
<a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center" href="#home-section" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#3F7DE0" opacity=".65" d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,41,11.7V23C41,32.9,32.9,41,23,41z"/>
<path class="fill-info" opacity=".5" d="M28,35.9L28,35.9c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18l11.3,0C43,0,46,3,46,6.6V18C46,27.9,38,35.9,28,35.9z"/>
<path class="fill-primary" opacity=".7" d="M18,46L18,46C8,46,0,38,0,28v0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6V28C35.9,38,27.9,46,18,46z"/>
<path class="fill-white" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z"/>
</svg>
<span class="u-header__navbar-brand-text">Front</span>
</a>
<!-- End Logo -->
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn u-hamburger"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="navBar"
data-toggle="collapse"
data-target="#navBar">
<span id="hamburgerTrigger" class="u-hamburger__box">
<span class="u-hamburger__inner"></span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="navBar" class="collapse navbar-collapse u-header__navbar-collapse">
<ul class="js-scroll-nav navbar-nav align-items-md-center u-header__navbar-nav">
<li class="nav-item u-header__nav-item">
<a class="nav-link u-header__nav-link" href="#home-section">Home</a>
</li>
<li class="nav-item u-header__nav-item">
<a class="nav-link u-header__nav-link" href="#pages-section">Pages</a>
</li>
<li class="nav-item u-header__nav-item">
<a class="nav-link u-header__nav-link" href="#works-section">Works</a>
</li>
<li class="nav-item u-header__nav-item">
<a class="nav-link u-header__nav-link" href="#blog-section">Blog</a>
</li>
<li class="nav-item u-header__nav-item">
<a class="nav-link u-header__nav-link" href="#specialty-section">Specialty</a>
</li>
<li class="nav-item u-header__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/appear.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.header.js"></script>
<script src="../../assets/js/components/hs.scroll-nav.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of header
$.HSCore.components.HSHeader.init($('#header'));
});
$(window).on('load', function () {
// initialization of HSScrollNav component
$.HSCore.components.HSScrollNav.init($('.js-scroll-nav'), {
duration: 700
});
});
</script>
Pages content goes here...
Works content goes here...
Blog content goes here...
Specialty content goes here...