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 ========== -->
              
            
              
                <!-- 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>