Starter

Header default: Navbar Horizontal Scroll

Header Layouts 
<!-- ========== 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 u-header__navbar u-header__navbar--no-space u-header__navbar--top-space">
        <!-- Logo -->
        <a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center" href="index.html" 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 -->

        <!-- Navigation -->
        <div class="u-header__navbar-nav-scroll u-header__navbar-body">
          <ul class="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="index.html">Home</a>
            </li>
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../pages/about-agency.html">About</a>
            </li>
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../pages/services-agency.html">Services</a>
            </li>
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../portfolio/boxed-grid.html">Works</a>
            </li>
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../blog/classic-right-sidebar.html">Blog</a>
            </li>
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../pages/coming-soon.html">Specialty</a>
            </li>
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../pages/contacts-agency.html">Contacts</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 ========== -->
Copy
<!-- JS Front -->
<script src="../../assets/js/components/hs.header.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of header
    $.HSCore.components.HSHeader.init($('#header'));
  });
</script>
Copy