Starter

Header default: One page navigation - Dropdown

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-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 js-mega-menu 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>

                            <!-- Pages -->
                            <li class="nav-item hs-has-sub-menu u-header__nav-item"
                                data-event="hover"
                                data-animation-in="slideInUp"
                                data-animation-out="fadeOut"
                                data-position="left">
                              <a id="pagesMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>

                              <ul id="pagesSubMenu" class="hs-sub-menu u-header__sub-menu u-header__sub-menu--spacer" aria-labelledby="pagesMegaMenu" style="min-width: 230px;">
                                <li><a class="nav-link u-header__sub-menu-nav-link" href="#about-section">About</a></li>
                                <li><a class="nav-link u-header__sub-menu-nav-link" href="#services-section">Services</a></li>
                                <li><a class="nav-link u-header__sub-menu-nav-link" href="#contacts-section">Contacts</a></li>
                              </ul>
                            </li>
                            <!-- End Pages -->

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

                            <!-- Demos -->
                            <li class="nav-item hs-has-mega-menu u-header__nav-item"
                                data-event="hover"
                                data-animation-in="slideInUp"
                                data-animation-out="fadeOut"
                                data-max-width="600px"
                                data-position="right">
                              <a id="demosMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Demos</a>

                              <!-- Demos - Mega Menu -->
                              <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="demosMegaMenu">
                                <div class="row no-gutters">
                                  <div class="col-md-6">
                                    <!-- Promo Item -->
                                    <div class="u-header__promo-item">
                                      <a class="u-header__promo-link" href="../house/index.html">
                                        <div class="media align-items-center">
                                          <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
                                          <div class="media-body">
                                            <span class="u-header__promo-title">House</span>
                                            <small class="u-header__promo-text">Real estate demo.</small>
                                          </div>
                                        </div>
                                      </a>
                                    </div>
                                    <!-- End Promo Item -->

                                    <!-- Promo Item -->
                                    <div class="u-header__promo-item">
                                      <a class="u-header__promo-link" href="../job/index.html">
                                        <div class="media align-items-center">
                                          <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
                                          <div class="media-body">
                                            <span class="u-header__promo-title">Job</span>
                                            <small class="u-header__promo-text">Job vacancy demo.</small>
                                          </div>
                                        </div>
                                      </a>
                                    </div>
                                    <!-- End Promo Item -->

                                    <!-- Promo Item -->
                                    <div class="u-header__promo-item">
                                      <a class="u-header__promo-link" href="../crypto/index.html">
                                        <div class="media align-items-center">
                                          <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
                                          <div class="media-body">
                                            <span class="u-header__promo-title">Crypto landing</span>
                                            <small class="u-header__promo-text">Cryptocurrency demo.</small>
                                          </div>
                                        </div>
                                      </a>
                                    </div>
                                    <!-- End Promo Item -->
                                  </div>

                                  <!-- Promo -->
                                  <div class="col-md-6 u-header__promo">
                                    <a class="d-block u-header__promo-inner" href="javascript:;">
                                      <div class="position-relative">
                                        <img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img6.jpg" alt="Image Description">
                                        <span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
                                      </div>
                                      <span class="text-secondary font-size-1">Front makes you look at things from a different perspectives.</span>
                                    </a>
                                  </div>
                                  <!-- End Promo -->
                                </div>
                              </div>
                              <!-- End Demos - Mega Menu -->
                            </li>
                            <!-- End Demos -->

                            <!-- Docs -->
                            <li class="nav-item hs-has-mega-menu u-header__nav-item"
                                data-event="hover"
                                data-animation-in="slideInUp"
                                data-animation-out="fadeOut"
                                data-max-width="260px"
                                data-position="right">
                              <a id="docsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>

                              <!-- Docs - Submenu -->
                              <div class="hs-mega-menu u-header__sub-menu" aria-labelledby="docsMegaMenu" style="min-width: 330px;">
                                <!-- Promo Item -->
                                <div class="u-header__promo-item">
                                  <a class="u-header__promo-link" href="../../documentation/index.html">
                                    <div class="media align-items-center">
                                      <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
                                      <div class="media-body">
                                        <span class="u-header__promo-title">
                                          Documentation
                                          <span class="badge badge-primary badge-pill ml-1">v2.7</span>
                                        </span>
                                        <small class="u-header__promo-text">Development guides</small>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                                <!-- End Promo Item -->

                                <!-- Promo Item -->
                                <div class="u-header__promo-item">
                                  <a class="u-header__promo-link" href="../../starter/index.html">
                                    <div class="media align-items-center">
                                      <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
                                      <div class="media-body">
                                        <span class="u-header__promo-title">Get started</span>
                                        <small class="u-header__promo-text">Components and snippets</small>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                                <!-- End Promo Item -->

                                <div class="u-header__promo-footer">
                                  <!-- List -->
                                  <div class="row no-gutters">
                                    <div class="col-6">
                                      <div class="u-header__promo-footer-item">
                                        <small class="text-muted d-block">Check what's new</small>
                                        <a class="small" href="../../documentation/getting-started/changelog.html">
                                          Changelog
                                        </a>
                                      </div>
                                    </div>
                                    <div class="col-6 u-header__promo-footer-ver-divider">
                                      <div class="u-header__promo-footer-item">
                                        <small class="text-muted d-block">Have a question?</small>
                                        <a class="small" href="http://htmlstream.com/contact-us">
                                          Contact us
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End List -->
                                </div>
                              </div>
                              <!-- End Docs - Submenu -->
                            </li>
                            <!-- End Docs -->

                            <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 ========== -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">
                <link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
                <link rel="stylesheet" href="../../assets/vendor/hs-megamenu/src/hs.megamenu.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
                <script src="../../assets/vendor/appear.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.header.js"></script>
                <script src="../../assets/js/components/hs.svg-injector.js"></script>
                <script src="../../assets/js/components/hs.scroll-nav.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of HSMegaMenu component
                    $('.js-mega-menu').HSMegaMenu({
                      event: 'hover',
                      pageContainer: $('.container'),
                      breakpoint: 767.98,
                      hideTimeOut: 0
                    });

                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');

                    // initialization of HSScrollNav component
                    $.HSCore.components.HSScrollNav.init($('.js-scroll-nav'), {
                      duration: 700
                    });
                  });

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

About content goes here...


Services content goes here...


Contacts content goes here...


Works content goes here...


Blog content goes here...