Headers

Documentation and examples for Front's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

How to use?

Copy-paste the following <script> near the end of your pages under JS Front to enable them.

              
                <script src="./assets/vendor/hs-header/dist/hs-header.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF HEADER
                    // =======================================================
                    var header = new HSHeader($('#header')).init();
                  });
                </script>

Using mega menu with header

If you are planning to add any mega menu, add the below given scripts.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

              
                <link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(window).on('ready', function () {
                    // INITIALIZATION OF MEGA MENU
                    // =======================================================
                    var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();
                  });
                </script>

Using unfold.js with header (eg. Topbar dropdowns, Search and Sidebars)

If you are planning to add things like, search, language dropdown, sidebar or anything similar, add the below given scripts.

Copy-paste the following <script> near the end of your pages under JS Front to enable them.

              
                <script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF UNFOLD
                    // =======================================================
                    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
                  });
                </script>

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

                    
                      <header id="headerBasic" class="header">
                        <div class="header-section">
                          <div id="basicLogoAndNav" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarBasic"
                                      data-toggle="collapse"
                                      data-target="#navBarBasic">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarBasic" class="collapse navbar-collapse">
                                <ul class="navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Another link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">One more link</a>
                                  </li>

                                  <li class="navbar-nav-item active">
                                    <a class="nav-link" href="#">Active link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                  </li>

                                  <li class="nav-item navbar-nav-last-item">
                                    <a class="btn btn-sm btn-primary 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>

With Bootstrap dropdown 

                    
                      <header id="headerWithBSDropdown" class="header">
                        <div class="header-section">
                          <div id="logoAndNavWithBSDropdown" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarWithBSDropdown"
                                      data-toggle="collapse"
                                      data-target="#navBarWithBSDropdown">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarWithBSDropdown" class="collapse navbar-collapse">
                                <ul class="navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Another link</a>
                                  </li>

                                  <!-- Dropdown -->
                                  <li class="dropdown">
                                    <a class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" id="dropdownSubMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

                                    <div class="dropdown-menu" aria-labelledby="dropdownSubMenu" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                  </li>
                                  <!-- End Dropdown -->

                                  <li class="navbar-nav-item active">
                                    <a class="nav-link" href="#">Active link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                  </li>

                                  <!-- Button -->
                                  <li class="nav-item navbar-nav-last-item">
                                    <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                                      Buy Now
                                    </a>
                                  </li>
                                  <!-- End Button -->
                                </ul>
                              </div>
                              <!-- End Navigation -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

Heads up!

If you still intend to use submenu within a dropdown menu, you will need to include the hs.megamenu library.

With dropdown 

                    
                      <header id="headerWithDropdown" class="header">
                        <div class="header-section">
                          <div id="logoAndNavWithDropdown" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarWithDropdown"
                                      data-toggle="collapse"
                                      data-target="#navBarWithDropdown">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarWithDropdown" class="collapse navbar-collapse">
                                <ul class="navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Another link</a>
                                  </li>

                                  <!-- Dropdown -->
                                  <li class="hs-has-sub-menu navbar-nav-item">
                                    <a id="dropdownMegaMenuWithDropdown" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="dropdownSubMenuWithDropdown">Dropdown</a>

                                    <!-- Dropdown - Submenu -->
                                    <div id="dropdownSubMenuWithDropdown" class="hs-sub-menu dropdown-menu" aria-labelledby="dropdownMegaMenuWithDropdown" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      <div class="dropdown-divider"></div>

                                      <!-- Submenu -->
                                      <div class="hs-has-sub-menu">
                                        <a id="navLinkDropdownSubmenuWithDropdown" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuDropdownSubmenuWithDropdown">Submenu</a>

                                        <div id="navSubmenuDropdownSubmenuWithDropdown" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkDropdownSubmenuWithDropdown" style="min-width: 200px;">
                                          <a class="dropdown-item" href="#">Action</a>
                                          <a class="dropdown-item" href="#">Another action</a>
                                          <div class="dropdown-divider"></div>
                                          <a class="dropdown-item" href="#">Something else here</a>
                                        </div>
                                      </div>
                                      <!-- End Submenu -->
                                    </div>
                                    <!-- End Dropdown - Submenu -->
                                  </li>
                                  <!-- End Dropdown -->

                                  <li class="navbar-nav-item active">
                                    <a class="nav-link" href="#">Active link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                  </li>

                                  <!-- Button -->
                                  <li class="nav-item navbar-nav-last-item">
                                    <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                                      Buy Now
                                    </a>
                                  </li>
                                  <!-- End Button -->
                                </ul>
                              </div>
                              <!-- End Navigation -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

Mega menu with Bootstrap dropdown

For more detailed mega menu information and examples, see Header Mega Menu page.

                    
                      <header id="headerWithBSDropdownMegaMenu" class="header">
                        <div class="header-section">
                          <div id="logoAndNavWithBSDropdownMegaMenu" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarWithBSDropdownMegaMenu"
                                      data-toggle="collapse"
                                      data-target="#navBarWithBSDropdownMegaMenu">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarWithBSDropdownMegaMenu" class="collapse navbar-collapse">
                                <ul class="navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Another link</a>
                                  </li>

                                  <!-- Nav Item -->
                                  <li class="position-static">
                                    <a class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" id="linkMegaMenuWithBSDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic example</a>

                                    <div class="dropdown-menu w-100 py-0" aria-labelledby="linkMegaMenuWithBSDropdown">
                                      <div class="row mega-menu-body">
                                        <div class="col-sm-3 mb-3 mb-sm-0">
                                          <span class="d-block h5">One</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item px-0" href="#">One</a>
                                            <a class="dropdown-item px-0" href="#">Two</a>
                                            <a class="dropdown-item px-0" href="#">Three</a>
                                          </div>
                                        </div>

                                        <div class="col-sm-3 mb-3 mb-sm-0">
                                          <span class="d-block h5">Two</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item px-0" href="#">One</a>
                                            <a class="dropdown-item px-0" href="#">Two</a>
                                            <a class="dropdown-item px-0" href="#">Three</a>
                                          </div>
                                        </div>

                                        <div class="col-sm-3 mb-3 mb-sm-0">
                                          <span class="d-block h5">Three</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item px-0" href="#">One</a>
                                            <a class="dropdown-item px-0" href="#">Two</a>
                                          </div>
                                        </div>

                                        <div class="col-sm-3">
                                          <span class="d-block h5">Four</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item px-0" href="#">One</a>
                                            <a class="dropdown-item px-0" href="#">Two</a>
                                            <a class="dropdown-item px-0" href="#">Three</a>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </li>
                                  <!-- End Nav Item -->

                                  <li class="navbar-nav-item active">
                                    <a class="nav-link" href="#">Active link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                  </li>

                                  <!-- Button -->
                                  <li class="nav-item navbar-nav-last-item">
                                    <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                                      Buy Now
                                    </a>
                                  </li>
                                  <!-- End Button -->
                                </ul>
                              </div>
                              <!-- End Navigation -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

With hs-mega-menu.js

For more detailed mega menu information and examples, see Header Mega Menu page.

                    
                      <header id="headerWithMegaMenu" class="header">
                        <div class="header-section">
                          <div id="logoAndNavWithMegaMenu" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarWithMegaMenu"
                                      data-toggle="collapse"
                                      data-target="#navBarWithMegaMenu">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarWithMegaMenu" class="collapse navbar-collapse">
                                <ul class="navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Another link</a>
                                  </li>

                                  <!-- Nav Item -->
                                  <li class="hs-has-mega-menu navbar-nav-item"
                                      data-hs-mega-menu-item-options='{
                                        "desktop": {
                                          "position": "left"
                                        }
                                      }'>
                                    <a id="linkMegaMenuWithMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Basic mega menu</a>

                                    <!-- Nav Item - Mega Menu -->
                                    <div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="linkMegaMenuWithMegaMenu">
                                      <div class="row mega-menu-body">
                                        <div class="col-sm-3 mb-3 mb-sm-0">
                                          <span class="d-block h5">One</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item" href="#">One</a>
                                            <a class="dropdown-item" href="#">Two</a>
                                            <a class="dropdown-item" href="#">Three</a>
                                          </div>
                                        </div>

                                        <div class="col-sm-3 mb-3 mb-sm-0">
                                          <span class="d-block h5">Two</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item" href="#">One</a>
                                            <a class="dropdown-item" href="#">Two</a>
                                            <a class="dropdown-item" href="#">Three</a>
                                          </div>
                                        </div>

                                        <div class="col-sm-3 mb-3 mb-sm-0">
                                          <span class="d-block h5">Three</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item" href="#">One</a>
                                            <a class="dropdown-item" href="#">Two</a>
                                          </div>
                                        </div>

                                        <div class="col-sm-3">
                                          <span class="d-block h5">Four</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item" href="#">One</a>
                                            <a class="dropdown-item" href="#">Two</a>
                                            <a class="dropdown-item" href="#">Three</a>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <!-- End Nav Item - Mega Menu -->
                                  </li>
                                  <!-- End Nav Item -->

                                  <li class="navbar-nav-item active">
                                    <a class="nav-link" href="#">Active link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                  </li>

                                  <!-- Button -->
                                  <li class="nav-item navbar-nav-last-item">
                                    <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                                      Buy Now
                                    </a>
                                  </li>
                                  <!-- End Button -->
                                </ul>
                              </div>
                              <!-- End Navigation -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

Brand

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. For example, this example demonstrates a navbar-brand with SVG logo:

                    
                      <header id="headerBrand" class="header">
                        <div class="header-section">
                          <div id="brandLogoAndNav" class="container">
                            <!-- Nav -->
                            <nav class="navbar navbar-expand-lg header-navbar">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 154.9 46.1">
                                  <path fill="#377DFF" d="M58.9,38.2V10h17.9v5.2H65.6v6.1H74v5.2h-8.4v11.7H58.9z"/>
                                  <path fill="#377DFF" d="M86.2,15.8V20c1.6-2.9,3.7-4.4,6.3-4.4v7h-1.6c-1.5,0-2.7,0.4-3.5,1.1c-0.8,0.8-1.2,2.1-1.2,3.9v10.6h-6.7V15.8
                                    H86.2z"/>
                                  <path fill="#377DFF" d="M95.9,35.3c-2.2-2.1-3.3-4.9-3.3-8.4c0-3.5,1.1-6.2,3.3-8.3c2.2-2.1,4.9-3.1,8.1-3.1s5.9,1,8.1,3.1
                                    s3.3,4.8,3.3,8.3s-1.1,6.2-3.3,8.4s-4.9,3.2-8.1,3.2S98.1,37.4,95.9,35.3z M107.3,31.2c0.9-1,1.3-2.4,1.3-4.2s-0.5-3.2-1.4-4.2
                                    s-2-1.4-3.3-1.4s-2.3,0.5-3.2,1.4c-0.9,1-1.4,2.3-1.4,4.2s0.5,3.2,1.4,4.2s2,1.4,3.3,1.4S106.4,32.1,107.3,31.2z"/>
                                  <path fill="#377DFF" d="M124.5,15.8v3.3c1.4-2.4,3.6-3.5,6.6-3.5c2.5,0,4.5,0.9,6.1,2.6s2.3,4,2.3,7v13.1h-6.7V26
                                    c0-1.4-0.4-2.6-1.1-3.4c-0.7-0.8-1.8-1.2-3.1-1.2s-2.3,0.4-3.1,1.2c-0.7,0.8-1.1,1.9-1.1,3.4v12.2h-6.7V15.8H124.5z"/>
                                  <path fill="#377DFF" d="M152.5,32.4h2.4v5.8h-3.4c-2.5,0-4.4-0.6-5.7-1.7c-1.3-1.1-2-3-2-5.7v-9.3h-2v-5.7h2v-5.5h6.7v5.5h4.4v5.7h-4.4
                                    v9.3C150.5,31.8,151.2,32.4,152.5,32.4z"/>
                                  <path fill="#377DFF" opacity=".65" d="M23,41.1L23,41.1c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4
                                    C41,33,32.9,41.1,23,41.1z"/>
                                  <path fill="#00DFFC" opacity=".5" d="M28,36L28,36c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3C43,0.1,46,3.1,46,6.7v11.4C46,28,38,36,28,36z"/>
                                  <path fill="#3F7DE0" opacity=".7" d="M18,46.1L18,46.1c-10,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4
                                    C35.9,38.1,27.9,46.1,18,46.1z"/>
                                  <path fill="#FFFFFF" d="M17.4,34.1V18.4h10.2v2.9h-6.4v3.4H26v2.9h-4.8v6.5H17.4z"/>
                                </svg>
                              </a>
                              <!-- End Logo -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

Here is another example with inline format:

                    
                      <header id="headerBrandWithPNG" class="header">
                        <div class="header-section">
                          <div id="brandWithPNGLogoAndNav" class="container">
                            <!-- Nav -->
                            <nav class="navbar navbar-expand-lg header-navbar">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Image Description">
                              </a>
                              <!-- End Logo -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

Topbar

Links are moved to dropdown on mobile devices (-sm breakpoint).

                    
                      <!-- Topbar -->
                      <div class="container header-hide-content pt-2">
                        <div class="d-flex align-items-center">
                          <!-- Language -->
                          <div class="hs-unfold">
                            <a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;"
                               data-hs-unfold-options='{
                                "target": "#languageDropdown",
                                "type": "css-animation",
                                "event": "hover",
                                "hideOnScroll": "true"
                               }'>
                              <img class="dropdown-item-icon" src="../node_modules/flag-icon-css/flags/4x3/us.svg" alt="SVG">
                              <span class="d-inline-block d-sm-none">US</span>
                              <span class="d-none d-sm-inline-block">United States</span>
                            </a>

                            <div id="languageDropdown" class="hs-unfold-content dropdown-menu">
                              <a class="dropdown-item active" href="#">English</a>
                              <a class="dropdown-item" href="#">Deutsch</a>
                              <a class="dropdown-item" href="#">Español‎</a>
                            </div>
                          </div>
                          <!-- End Language -->

                          <div class="ml-auto">
                            <!-- Jump To -->
                            <div class="hs-unfold d-sm-none mr-2">
                              <a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "target": "#jumpToDropdown",
                                  "type": "css-animation",
                                  "event": "hover",
                                  "hideOnScroll": "true"
                                 }'>
                                Jump to
                              </a>

                              <div id="jumpToDropdown" class="hs-unfold-content dropdown-menu">
                                <a class="dropdown-item" href="#">Help</a>
                                <a class="dropdown-item" href="#">Contacts</a>
                              </div>
                            </div>
                            <!-- End Jump To -->

                            <!-- Links -->
                            <div class="nav nav-sm nav-y-0 d-none d-sm-flex ml-sm-auto">
                              <a class="nav-link" href="#">Help</a>
                              <a class="nav-link" href="#">Contacts</a>
                            </div>
                            <!-- End Links -->
                          </div>

                          <ul class="list-inline ml-2 mb-0">
                            <!-- Search -->
                            <li class="list-inline-item">
                              <a class="btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;">
                                <i class="fas fa-search"></i>
                              </a>
                            </li>
                            <!-- End Search -->

                            <!-- Shopping Cart -->
                            <li class="list-inline-item">
                              <a class="btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;">
                                <i class="fas fa-shopping-cart"></i>
                              </a>
                            </li>
                            <!-- End Shopping Cart -->

                            <!-- Account Login -->
                            <li class="list-inline-item">
                              <a class="btn btn-xs btn-icon btn-ghost-secondary" href="#">
                                <i class="fas fa-user-circle"></i>
                              </a>
                            </li>
                            <!-- End Account Login -->
                          </ul>
                        </div>
                      </div>
                      <!-- End Topbar -->

Navbar alignments

By default, navbars are right aligned.

                    
                      <header id="headerNavLeftAlignment" class="header">
                      </header>

Use .left-aligned-navbar class to left align the navbar.

                    
                      <header id="headerNavLeftAlignment" class="header left-aligned-navbar">
                      </header>

Use .center-aligned-navbar class to center align the navbar.

                    
                      <header id="headerNavCenterAlignment" class="header center-aligned-navbar">
                      </header>

Navbar horizontal scroll

You have too many links to fit into a single navbar? Or you do not want your menu to collapse at all? Front offers navbar scroll option that horizontally scrolls the navbar links.

                    
                      <header id="headerHorizontalScroll" class="header">
                        <div class="header-section">
                          <div id="logoAndNavHorizontalScroll" class="container">
                            <!-- Nav -->
                            <nav class="navbar navbar-expand header-navbar">
                              <!-- Logo -->
                              <a class="navbar-brand mr-3" 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="navbar-nav mt-0">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">You can horizontally scroll me!</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Home</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">About</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Services</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Works</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Blog</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Specialty</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">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>

One page nav

With our Scroll nav plguin, it is now easy to convert links into scrollable nav.

Wrap the links in a parent element with an ID or class and add the same ID or the class in the JS init function of the assets/vendor/hs-scroll-nav/dist/hs-scroll-nav.min.js plugin, add #section-name to the href element you want to be scrolled to a certain content.

                    
                      <header id="headerOnepagNav" class="header">
                        <div class="header-section">
                          <div id="logoAndNavOnepagNav" class="container">
                            <!-- Nav -->
                            <nav class="navbar navbar-expand-lg">
                              <!-- Logo -->
                              <a class="navbar-brand" href="#home-section" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarOnepagNav"
                                      data-toggle="collapse"
                                      data-target="#navBarOnepagNav">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarOnepagNav" class="collapse navbar-collapse">
                                <ul class="js-scroll-nav navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#home-section">Home</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#pages-section">Pages</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#works-section">Works</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#blog-section">Blog</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#specialty-section">Specialty</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>

You can also use Dropdowns.

                    
                      <header id="headerOnepagNavWithDropdown" class="header">
                        <div class="header-section">
                          <div id="logoAndNavOnepagNavWithDropdown" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg">
                              <!-- Logo -->
                              <a class="navbar-brand" href="#home-section" aria-label="Front">
                                <img src="../assets/svg/logos/logo.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarOnepagNavWithDropdown"
                                      data-toggle="collapse"
                                      data-target="#navBarOnepagNavWithDropdown">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarOnepagNavWithDropdown" class="collapse navbar-collapse">
                                <ul class="js-scroll-nav navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#home-section">Home</a>
                                  </li>

                                  <!-- Pages -->
                                  <li class="hs-has-sub-menu navbar-nav-item"
                                      data-hs-mega-menu-item-options='{
                                        "desktop": {
                                          "position": "left"
                                        }
                                      }'>
                                    <a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>

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

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#works-section">Works</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#blog-section">Blog</a>
                                  </li>
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#specialty-section">Specialty</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>

Color schemes

Theming the navbar has never been easier. Apply the parent .header-white-nav-links-* class next to the .header class.

                    
                      <header id="headerPrimary" class="header header-white-nav-links-lg">
                        <div class="header-section bg-primary">
                        </div>
                      </header>
                      <header id="headerPrimary" class="header header-white-nav-links-lg">
                        <div class="header-section bg-dark">
                        </div>
                      </header>

Transparent

Add a .header-bg-transparent class to a parent element (must come before .header-section class), also you can use .header-white-nav-links{-sm|-md|-lg|-xl} white color nav links class for clear displaying the links.

Transparent .header-bg-transparent{-sm|-md|-lg|-xl} classes are also available for responsive breakpoints.

                    
                      <header id="headerTransparent" class="header header-bg-transparent header-white-nav-links-md">
                        <div class="header-section">
                          <div id="transparentLogoAndNav" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg header-navbar-text-white">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo-white.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarTransparent"
                                      data-toggle="collapse"
                                      data-target="#navBarTransparent">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarTransparent" class="collapse navbar-collapse">
                                <ul class="navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Another link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">One more link</a>
                                  </li>

                                  <li class="navbar-nav-item active">
                                    <a class="nav-link" href="#">Active link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                  </li>

                                  <!-- Button -->
                                  <li class="nav-item navbar-nav-last-item">
                                    <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                                      Buy Now
                                    </a>
                                  </li>
                                  <!-- End Button -->
                                </ul>
                              </div>
                              <!-- End Navigation -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

And here's an example with border.

                    
                      <header id="headerTransparentWithBorder" class="header header-bg-transparent header-white-nav-links-md">
                        <div class="header-section header-section-divider">
                          <div id="transparentWithBorderLogoAndNav" class="container">
                            <!-- Nav -->
                            <nav class="js-mega-menu navbar navbar-expand-lg header-navbar-text-white">
                              <!-- Logo -->
                              <a class="navbar-brand" href="index.html" aria-label="Front">
                                <img src="../assets/svg/logos/logo-white.svg" alt="Logo">
                              </a>
                              <!-- End Logo -->

                              <!-- Responsive Toggle Button -->
                              <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                      aria-label="Toggle navigation"
                                      aria-expanded="false"
                                      aria-controls="navBarTransparentWithBorder"
                                      data-toggle="collapse"
                                      data-target="#navBarTransparentWithBorder">
                                <span class="navbar-toggler-default">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                                  </svg>
                                </span>
                                <span class="navbar-toggler-toggled">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </span>
                              </button>
                              <!-- End Responsive Toggle Button -->

                              <!-- Navigation -->
                              <div id="navBarTransparentWithBorder" class="collapse navbar-collapse">
                                <ul class="navbar-nav">
                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">Another link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link" href="#">One more link</a>
                                  </li>

                                  <li class="navbar-nav-item active">
                                    <a class="nav-link" href="#">Active link</a>
                                  </li>

                                  <li class="navbar-nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                  </li>

                                  <!-- Button -->
                                  <li class="nav-item navbar-nav-last-item">
                                    <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                                      Buy Now
                                    </a>
                                  </li>
                                  <!-- End Button -->
                                </ul>
                              </div>
                              <!-- End Navigation -->
                            </nav>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </header>

Placement

Use our placement-classes to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Example page: Header default

                    
                      <header id="headerPlacementDefault" class="header">
                        <a class="navbar-brand" href="#">Default</a>
                      </header>
                    
                  
                    
                      <header id="headerPlacementStatic" class="header header-static">
                        <a class="navbar-brand" href="#">Static</a>
                      </header>

Example page: Absolute top

                    
                      <header id="headerPlacementAbsTop" class="header header-abs-top">
                        <a class="navbar-brand" href="#">Absolute top</a>
                      </header>

Example page: Sticky top

                    
                      <header id="headerPlacementStickyTop" class="header header-sticky-top">
                        <a class="navbar-brand" href="#">Sticky top</a>
                      </header>

Example page: Floating

                    
                      <header id="headerPlacementFloating" class="header header-floating">
                        <a class="navbar-brand" href="#">Floating</a>
                      </header>

Responsive behaviors

Placement classes can utilize .header-*{-sm|-md|-lg|-xl}. Learn more placement behaviors.

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.

SCSS

SCSS-files of the component can be found here assets/scss/front/headers/

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF HEADER
                    // =======================================================
                    var header = new HSHeader($('#header')).init();
                  });
                </script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-header-options='{
                 ...
              }' - array

              data-hs-header-item-options='{
                 ...
              }' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-circles-options='{}'.

Parameters Description Default value

fixMoment

 The distance after which the js-header-fix-moment class will be added to the initialized element, which initializes the animation specified in fixEffect 0

fixMomentClasses

 If the header contains elements with the class header-section, then it adds the classes specified in 
                      
                        data-hs-header-item-options='{
                          "fixMomentClasses": "bg-dark"
                        }'
Otherwise, it searches for the given parameter in data-hs-header-options and adds classes to the header. These classes are added when the scroll value is greater than or equal to the value in fixMoment 		null

fixMomentExclude

 If the header contains elements with the class header-section, then removes the classes specified in the elements 
                      
                        data-hs-header-item-options='{
                          "fixMomentExclude": "bg-white"
                        }'
Otherwise, it looks for this parameter in data-hs-header-options and removes the classes from the header. These classes are deleted when the scroll value is greater than or equal to the value in fixMoment 		null

fixEffect

 Determines with what effect the initialized element disappears. There are 2 options: slide, fade 'slide'

breakpoint

 Determines with what permission the plugin is initialized. Resolution Map corresponds to Bootstrap 4 'lg'

Placement classes

List of available classes and their descriptions.

Class Description

.header-static-{media-type}

 Static type, behaves as with the rule position: static;. Its geometry is taken into account when rendering a page.

.header-abs-top-{media-type}

 Practically the same as static, but the geometry of this type of header is not taken into account when rendering the page (because of position: absolute;). This type of header is well suited for transparent/half-transparent header designs that are displayed on top of the slider/hero/etc. Its geometry is taken into account when rendering a page.

.header-abs-top-2nd-screen-{media-type}

 This type of header works when we have the first section on the page that has a height: 100vh;, i.e. fullscreen. It is displayed as adhering to the top of the second section in the stream on the page. The geometry of this header is also excluded from the calculation of the positioning of all elements on the page.

.header-abs-bottom-{media-type}

 The same as header-abs-top, only the header is displayed as sticking to the bottom of the first section in the stream.

.header-sticky-top-{media-type}

 It is displayed as sticking to the top of the screen always (position: fixed; top: 0;). The geometry of this header is also excluded from the calculation of the positioning of all elements on the page.

.header-sticky-bottom-{media-type}

 It is displayed as always (position: fixed; bottom: 0;) adhered to the top of the screen. The geometry of this header is also excluded from the calculation of the positioning of all elements on the page.

Behaviors

List of available classes and their descriptions.

Class Description

.header-show-hide-{media-type}

 Show/hide an item when scrolling to the user specified time. This moment is given in the form of the number of scrolled pixels, through the attribute data-header-fix-moment="". There are 3 available options for how to show/hide an element using the data-header-fix-effect="" attribute:
  • slide
  • fade
  • show-hide

.header-change-logo-{media-type}

 Changes the logo at the time specified by the user. This moment is given in the form of the number of scrolled pixels, through the attribute data-header-fix-moment="". The markup of the logo is important, and should look like this: 
                      
                        <a class="navbar-brand" href="#" aria-label="Front">
                          <img class="header-navbar-brand-default" src="../assets/svg/logos/logo-white.svg" alt="Logo">
                          <img class="header-navbar-brand-on-scroll" src="../assets/svg/logos/logo.svg" alt="Logo">
                        </a>

.header-change-appearance-{media-type}

 Changes the appearance of the sections at the time specified by the user. This moment is given in the form of the number of scrolled pixels, through the attribute data-header-fix-moment="". You can control the appearance of each section with 2 attributes:
  • data-header-fix-moment-exclude="" - all the listed classes in this attribute will be removed from the section at the time of commit.
  • data-header-fix-moment-classes="" - all the listed classes in this attribute will be added to the section at the time of the commit.
This approach allows you to manage styles without !important CSS parameter.
For example: 
                      
                        <div class="header-section header-section-light bg-secondary"
                             data-header-fix-moment-exclude="header-section-light bg-secondary"
                             data-header-fix-moment-classes="header-section-primary bg-primary">
In this case, to change the section from gray to dark, we remove header-section-light bg-secondary (which by default is on this element) and add header-section-primary bg-primary.

.header-toggle-section-{media-type}

 Show/hide one of the header sections (preferably the very first) at the user specified time. This moment is specified as the number of scrolled pixels, through the attribute data-header-fix-moment="". For this, the section itself needs to be given the class .header-section-hidden.

.header-invulnerable-{media-type}

 This class is auxiliary and is used to reset the previous behavior (with the previous permission, if the user has changed the window size) on a certain viewport. For example, if the user wants to open/show a section on -xs, -sm, but not higher. (Because Front alike Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.), having set -sm it will work and on permissions above, in order to prevent it use this class.
For example: 
                      
                        <header class="header-toggle-section header-invulnerable-md">
                          ...
                        </header>
here the behavior of toggle-section will work until the resolution is -md (that is, xs, sm), on viewport -md it will not work.

A certain behavior is tied to a specific position

Because of the complexity of the task itself with behaviors and positions, a certain behavior is tied to a specific position. That is, if you want the above -lg to work show-hide, you need to specify 2 classes.

For example:

                
                  <header class="header-show-hide-lg header-abs-top-lg">
                    ...
                  </header>

Behavior examples

.header-change-logo

                
                  <a class="navbar-brand" href="#" aria-label="Front">
                    <img class="header-navbar-brand-default" src="../assets/svg/logos/logo-white.svg" alt="Logo">
                    <img class="header-navbar-brand-on-scroll" src="../assets/svg/logos/logo.svg" alt="Logo">
                  </a>

.header-change-appearance

                
                  <header class="header-section header-section-light bg-white py-7"
                          data-header-fix-moment-exclude="bg-primary py-9"
                          data-header-fix-moment-classes="bg-dark py-5">
                  </header>

Behavior classes

List of available classes and their descriptions.

These placement classes can have the following behavior classes Description

.header-static-{media-type}
  • .header-show-hide-{media-type}
  • .header-change-logo-{media-type}
  • .header-change-appearance-{media-type}

.header-abs-top-{media-type}
  • .header-show-hide-{media-type}
  • .header-change-logo-{media-type}
  • .header-change-appearance-{media-type}

.header-abs-top-2nd-screen-{media-type}
  • .header-change-logo-{media-type}
  • .header-change-appearance-{media-type}

.header-abs-bottom-{media-type}
  • .header-change-logo-{media-type}
  • .header-change-appearance-{media-type}

.header-sticky-top-{media-type}
  • .header-show-hide-{media-type}
  • .header-change-logo-{media-type}
  • .header-change-appearance-{media-type}
  • .header-toggle-section-{media-type}

.header-sticky-bottom-{media-type}
  • .header-show-hide-{media-type}
  • .header-change-logo-{media-type}
  • .header-change-appearance-{media-type}
  • .header-toggle-section-{media-type}