Skip to main content

Header

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

How it works

Here's what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • Headers require a wrapping .u-header with behavior behaviors and their classes for responsiveness.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

How to use?

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

<script src="../../assets/js/components/hs.header.js"></script>
Copy

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
    $.HSCore.components.HSHeader.init($('#header'));
  });
</script>
Copy

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-megamenu/src/hs.megamenu.css">
Copy

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

<script src="../../assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
Copy

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

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

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

If you are planning to add thing 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 Space to enable them.

<script src="../../assets/js/components/hs.unfold.js"></script>
Copy

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 component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
  });
</script>
Copy

Supported content

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

  • .navbar-brand and .u-header__navbar-brand for your company, product, or project name.
  • .navbar-nav and .u-header__navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler and .u-hamburger for use with our collapse plugin and other navigation toggling behaviors.
  • .form-inline for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

<header id="headerClassic" class="u-header u-header--bordered">
  <div class="u-header__section">
    <div id="logoAndNavClassic" class="container-fluid">
      <!-- Nav -->
      <nav class="js-mega-menu navbar navbar-expand-lg u-header__navbar">
        <!-- Logo -->
        <div class="u-header__navbar-brand-wrapper">
          <a class="navbar-brand u-header__navbar-brand" href="index.html" aria-label="Space">
            <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo.svg" alt="Logo">
            <img class="u-header__navbar-brand-mobile" src="../../assets/svg/logos/logo-short.svg" alt="Logo">
          </a>
        </div>
        <!-- End Logo -->

        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn u-hamburger u-header__hamburger"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="navBarClassic"
                data-toggle="collapse"
                data-target="#navBarClassic">
          <span class="d-none d-sm-inline-block">Menu</span>
          <span id="hamburgerTriggerClassic" class="u-hamburger__box ml-3">
            <span class="u-hamburger__inner"></span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div id="navBarClassic" class="collapse navbar-collapse u-header__navbar-collapse py-0">
          <ul class="navbar-nav u-header__navbar-nav">
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#">
                Home
              </a>
            </li>

            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#">
                Link
              </a>
            </li>

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

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

            <!-- Button -->
            <li class="nav-item u-header__nav-item-btn">
              <a class="btn btn-sm btn-primary" href="#signupModalClassic" role="button"
                 data-modal-target="#signupModalClassic"
                 data-overlay-color="#151b26">
                <span class="fa fa-user-circle mr-1"></span>
                Signin
              </a>
            </li>
            <!-- End Button -->
          </ul>
        </div>
        <!-- End Navigation -->
      </nav>
      <!-- End Nav -->
    </div>
  </div>
</header>

<!-- Signup Modal Window -->
<div id="signupModalClassic" class="js-signup-modal u-modal-window">
  <!-- Modal Close Button -->
  <button class="btn btn-sm btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
    <span class="fas fa-times"></span>
  </button>
  <!-- End Modal Close Button -->

  <!-- Content -->
  <div class="p-5">
    <form class="js-validate">
      <!-- Signin -->
      <div id="signin" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign in</h2>
          <p>Signin to manage your account.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="row mb-3">
          <div class="col-6">
            <!-- Checkbox -->
            <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
              <input type="checkbox" class="custom-control-input" id="rememberMeCheckbox">
              <label class="custom-control-label" for="rememberMeCheckbox">
                Remember Me
              </label>
            </div>
            <!-- End Checkbox -->
          </div>

          <div class="col-6 text-right">
            <a class="js-animation-link float-right" href="javascript:;"
               data-target="#forgotPassword"
               data-link-group="idForm"
               data-animation-in="fadeIn">Forgot Password?</a>
          </div>
        </div>

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signin</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Do not have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signup"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signup
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signin Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signin with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signin with Twitter
            </button>
          </div>
        </div>
        <!-- End Signin Social Buttons -->
      </div>
      <!-- End Signin -->

      <!-- Signup -->
      <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign up</h2>
          <p>Fill out the form to get started.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-key form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="confirmPassword" required
                   placeholder="Confirm Password"
                   aria-label="Confirm Password"
                   data-msg="Password does not match the confirm password."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signup</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signup Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signup with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signup with Twitter
            </button>
          </div>
        </div>
        <!-- End Signup Social Buttons -->
      </div>
      <!-- End Signup -->

      <!-- Forgot Password -->
      <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Recover account</h2>
          <p>Enter your email address and an email with instructions will be sent to you.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Recover Account</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>
      </div>
      <!-- End Forgot Password -->
    </form>
  </div>
  <!-- End Content -->
</div>
<!-- End Signup Modal Window -->
Copy

HTML:

<header id="headerBasic" class="u-header u-header--bordered">
  <div class="u-header__section">
    <div id="logoAndNavBasic" class="container-fluid">
      <!-- Nav -->
      <nav class="js-mega-menu navbar navbar-expand-lg u-header__navbar">
        <!-- Logo -->
        <div class="u-header__navbar-brand-wrapper">
          <a class="navbar-brand u-header__navbar-brand" href="index.html" aria-label="Space">
            <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo.svg" alt="Logo">
            <img class="u-header__navbar-brand-mobile" src="../../assets/svg/logos/logo-short.svg" alt="Logo">
          </a>
        </div>
        <!-- End Logo -->

        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn u-hamburger u-header__hamburger"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="navBarBasic"
                data-toggle="collapse"
                data-target="#navBarBasic">
          <span class="d-none d-sm-inline-block">Menu</span>
          <span id="hamburgerTriggerBasic" class="u-hamburger__box ml-3">
            <span class="u-hamburger__inner"></span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div id="navBarBasic" class="collapse navbar-collapse u-header__navbar-collapse py-0">
          <ul class="navbar-nav u-header__navbar-nav">
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#">
                Home
              </a>
            </li>

            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#">
                Link
              </a>
            </li>

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

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

            <!-- Button -->
            <li class="nav-item u-header__nav-item-btn">
              <a class="btn btn-sm btn-primary" href="#signupModalBasic" role="button"
                 data-modal-target="#signupModalBasic"
                 data-overlay-color="#151b26">
                <span class="fa fa-user-circle mr-1"></span>
                Signin
              </a>
            </li>
            <!-- End Button -->

            <!-- Search -->
            <li class="nav-item u-header__navbar-icon u-header__navbar-v-divider">
              <a class="btn btn-xs btn-icon btn-text-dark u-header__search-toggle" href="javascript:;" role="button"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-controls="searchBasic"
                 data-unfold-target="#searchBasic"
                 data-unfold-hide-on-scroll="false"
                 data-unfold-type="css-animation"
                 data-unfold-duration="300"
                 data-unfold-delay="300"
                 data-unfold-animation-in="slideInUp">
                <span class="fa fa-search btn-icon__inner"></span>
              </a>

              <!-- Input -->
              <form id="searchBasic" class="js-focus-state input-group form u-header__search u-unfold--css-animation u-unfold--hidden">
                <input class="form-control form__input" type="search" placeholder="Search Space">
                <div class="input-group-addon u-header__search-addon p-0">
                  <button class="btn btn-primary u-header__search-addon-btn" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                </div>
              </form>
              <!-- End Input -->
            </li>
            <!-- End Search -->
          </ul>
        </div>
        <!-- End Navigation -->

        <ul class="navbar-nav flex-row u-header__secondary-nav">
          <!-- Shopping Cart -->
          <li class="nav-item u-header__navbar-icon-wrapper u-header__navbar-icon">
            <a id="shoppingCartDropdownInvokerBasic" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
                    aria-controls="shoppingCartDropdownBasic"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-unfold-event="click"
                    data-unfold-target="#shoppingCartDropdownBasic"
                    data-unfold-type="css-animation"
                    data-unfold-duration="300"
                    data-unfold-delay="300"
                    data-unfold-hide-on-scroll="true"
                    data-unfold-animation-in="slideInUp"
                    data-unfold-animation-out="fadeOut">
              <span class="fa fa-shopping-cart btn-icon__inner"></span>
            </a>

            <div id="shoppingCartDropdownBasic" class="u-unfold u-unfold--cart text-center border rounded-0 right-0 p-7" aria-labelledby="shoppingCartDropdownInvokerBasic" style="min-width: 250px;">
              <span class="u-icon u-icon--primary u-icon--md rounded-circle mb-3">
                <span class="fa fa-shopping-basket u-icon__inner"></span>
              </span>
              <span class="d-block">Your Cart is Empty</span>
            </div>
          </li>
          <!-- End Shopping Cart -->

          <!-- Account Signin -->
          <li class="nav-item u-header__navbar-icon">
            <!-- Account Sidebar Toggle Button -->
            <a id="sidebarNavTogglerBasic" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
               aria-controls="sidebarContentBasic"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-hide-on-scroll="false"
               data-unfold-target="#sidebarContentBasic"
               data-unfold-type="css-animation"
               data-unfold-animation-in="fadeInRight"
               data-unfold-animation-out="fadeOutRight"
               data-unfold-duration="500">
              <span class="fa fa-bars btn-icon__inner font-size-13"></span>
            </a>
            <!-- End Account Sidebar Toggle Button -->
          </li>
          <!-- End Account Signin -->
        </ul>
      </nav>
      <!-- End Nav -->
    </div>
  </div>
</header>

<!-- Panel Sidebar Navigation -->
<aside id="sidebarContentBasic" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarNavTogglerBasic">
  <div class="u-sidebar__scroller">
    <div class="u-sidebar__container">
      <div class="u-sidebar--panel__footer-offset">
        <!-- Toggle Button -->
        <div class="d-flex align-items-center border-bottom py-4 px-5">
          <h4 class="h5 mb-0">Account</h4>

          <button type="button" class="close u-sidebar__close ml-auto"
                  aria-controls="sidebarContentBasic"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-unfold-event="click"
                  data-unfold-hide-on-scroll="false"
                  data-unfold-target="#sidebarContentBasic"
                  data-unfold-type="css-animation"
                  data-unfold-animation-in="fadeInRight"
                  data-unfold-animation-out="fadeOutRight"
                  data-unfold-duration="500">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <!-- End Toggle Button -->

        <!-- Content -->
        <div class="js-scrollbar u-sidebar__body">
          <div class="u-sidebar__content py-5">
            <!-- Title -->
            <div class="py-2 px-5">
              <h4 class="text-uppercase text-muted font-size-13 mb-0">Menu label</h4>
            </div>
            <!-- End Title -->

            <!-- List -->
            <ul class="list-unstyled font-size-14 mb-5">
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/finance-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Dashboard</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/touch-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Activity</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/team-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Team</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/email-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Mailbox</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/projects-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Projects</span>
                  </div>
                </a>
              </li>
            </ul>
            <!-- End List -->

            <!-- Title -->
            <div class="py-2 px-5">
              <h4 class="text-uppercase text-muted font-size-13 mb-0">Sub level</h4>
            </div>
            <!-- End Title -->

            <!-- List -->
            <ul class="list-unstyled font-size-14 mb-0">
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/calendar-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Calendar</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/cog-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Tools</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/archive-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Archive</span>
                  </div>
                </a>
              </li>
            </ul>
            <!-- End List -->
          </div>
        </div>
        <!-- End Content -->
      </div>

      <!-- Footer -->
      <footer class="u-sidebar__footer u-sidebar__footer--panel py-4 px-5">
        <!-- List -->
        <ul class="list-inline font-size-14 mb-0">
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link pr-2" href="#">Privacy</a>
          </li>
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link px-2" href="#">Terms</a>
          </li>
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link pl-2" href="#">
              <i class="fa fa-info-circle"></i>
            </a>
          </li>
        </ul>
        <!-- End List -->
      </footer>
      <!-- End Footer -->
    </div>
  </div>
</aside>
<!-- End Panel Sidebar Navigation -->

<!-- Signup Modal Window -->
<div id="signupModalBasic" class="js-signup-modal u-modal-window">
  <!-- Modal Close Button -->
  <button class="btn btn-sm btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
    <span class="fas fa-times"></span>
  </button>
  <!-- End Modal Close Button -->

  <!-- Content -->
  <div class="p-5">
    <form class="js-validate">
      <!-- Signin -->
      <div id="signin" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign in</h2>
          <p>Signin to manage your account.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="row mb-3">
          <div class="col-6">
            <!-- Checkbox -->
            <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
              <input type="checkbox" class="custom-control-input" id="rememberMeCheckbox">
              <label class="custom-control-label" for="rememberMeCheckbox">
                Remember Me
              </label>
            </div>
            <!-- End Checkbox -->
          </div>

          <div class="col-6 text-right">
            <a class="js-animation-link float-right" href="javascript:;"
               data-target="#forgotPassword"
               data-link-group="idForm"
               data-animation-in="fadeIn">Forgot Password?</a>
          </div>
        </div>

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signin</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Do not have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signup"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signup
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signin Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signin with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signin with Twitter
            </button>
          </div>
        </div>
        <!-- End Signin Social Buttons -->
      </div>
      <!-- End Signin -->

      <!-- Signup -->
      <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign up</h2>
          <p>Fill out the form to get started.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-key form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="confirmPassword" required
                   placeholder="Confirm Password"
                   aria-label="Confirm Password"
                   data-msg="Password does not match the confirm password."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signup</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signup Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signup with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signup with Twitter
            </button>
          </div>
        </div>
        <!-- End Signup Social Buttons -->
      </div>
      <!-- End Signup -->

      <!-- Forgot Password -->
      <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Recover account</h2>
          <p>Enter your email address and an email with instructions will be sent to you.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Recover Account</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>
      </div>
      <!-- End Forgot Password -->
    </form>
  </div>
  <!-- End Content -->
</div>
<!-- End Signup Modal Window -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/animate.css">
<link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Space -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/helpers/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.malihu-scrollbar.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      afterOpen: function () {
        if (!$('body').hasClass('IE11')) {
          $(this).find('input[type="search"]').focus();
        }
      }
    });

    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#password'
        }
      }
    });

    // initialization of forms
    $.HSCore.helpers.HSFocusState.init();

    // initialization of malihu scrollbar
    $.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));

    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-signup-modal', {
      autonomous: true
    });

    // initialization of show animations
    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
  });
</script>
Copy

With dropdown

HTML:

<header id="headerDropdown" class="u-header u-header--bordered">
  <div class="u-header__section">
    <div id="logoAndNavDropdown" class="container-fluid">
      <!-- Nav -->
      <nav class="js-mega-menu navbar navbar-expand-lg u-header__navbar">
        <!-- Logo -->
        <div class="u-header__navbar-brand-wrapper">
          <a class="navbar-brand u-header__navbar-brand" href="index.html" aria-label="Space">
            <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo.svg" alt="Logo">
            <img class="u-header__navbar-brand-mobile" src="../../assets/svg/logos/logo-short.svg" alt="Logo">
          </a>
        </div>
        <!-- End Logo -->

        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn u-hamburger u-header__hamburger"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="navBarDropdown"
                data-toggle="collapse"
                data-target="#navBarDropdown">
          <span class="d-none d-sm-inline-block">Menu</span>
          <span id="hamburgerTriggerDropdown" class="u-hamburger__box ml-3">
            <span class="u-hamburger__inner"></span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div id="navBarDropdown" class="collapse navbar-collapse u-header__navbar-collapse py-0">
          <ul class="navbar-nav u-header__navbar-nav">
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#">
                Home
              </a>
            </li>

            <!-- Dropdown -->
            <li class="nav-item hs-has-sub-menu u-header__nav-item"
                data-event="hover"
                data-animation-in="fadeInUp"
                data-animation-out="fadeOut">
              <a id="dropdownMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-labelledby="dropdownSubMenu">
                Dropdown
                <span class="fa fa-angle-down u-header__nav-link-icon"></span>
              </a>

              <!-- Dropdown Submenu -->
              <ul id="dropdownSubMenu" class="list-inline hs-sub-menu u-header__sub-menu mb-0" style="min-width: 220px;"
                  aria-labelledby="dropdownMegaMenu">
                <li class="dropdown-item u-header__sub-menu-list-item py-0">
                  <a class="nav-link u-header__sub-menu-nav-link" href="#">Action</a>
                </li>
                <li class="dropdown-item u-header__sub-menu-list-item py-0">
                  <a class="nav-link u-header__sub-menu-nav-link" href="#">Another action</a>
                </li>
                <li class="dropdown-item u-header__sub-menu-list-item py-0">
                  <a class="nav-link u-header__sub-menu-nav-link" href="#">Something else</a>
                </li>
                <li class="dropdown-divider"></li>
                <li class="dropdown-item u-header__sub-menu-list-item py-0">
                  <a class="nav-link u-header__sub-menu-nav-link" href="#">Divider</a>
                </li>
              </ul>
              <!-- Dropdown Submenu -->
            </li>
            <!-- End Dropdown -->

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

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

            <!-- Button -->
            <li class="nav-item u-header__nav-item-btn">
              <a class="btn btn-sm btn-primary" href="#signupModalDropdown" role="button"
                 data-modal-target="#signupModalDropdown"
                 data-overlay-color="#151b26">
                <span class="fa fa-user-circle mr-1"></span>
                Signin
              </a>
            </li>
            <!-- End Button -->

            <!-- Search -->
            <li class="nav-item u-header__navbar-icon u-header__navbar-v-divider">
              <a class="btn btn-xs btn-icon btn-text-dark u-header__search-toggle" href="javascript:;" role="button"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-controls="searchDropdown"
                 data-unfold-target="#searchDropdown"
                 data-unfold-hide-on-scroll="false"
                 data-unfold-type="css-animation"
                 data-unfold-duration="300"
                 data-unfold-delay="300"
                 data-unfold-animation-in="slideInUp">
                <span class="fa fa-search btn-icon__inner"></span>
              </a>

              <!-- Input -->
              <form id="searchDropdown" class="js-focus-state input-group form u-header__search u-unfold--css-animation u-unfold--hidden">
                <input class="form-control form__input" type="search" placeholder="Search Space">
                <div class="input-group-addon u-header__search-addon p-0">
                  <button class="btn btn-primary u-header__search-addon-btn" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                </div>
              </form>
              <!-- End Input -->
            </li>
            <!-- End Search -->
          </ul>
        </div>
        <!-- End Navigation -->

        <ul class="navbar-nav flex-row u-header__secondary-nav">
          <!-- Shopping Cart -->
          <li class="nav-item u-header__navbar-icon-wrapper u-header__navbar-icon">
            <a id="shoppingCartDropdownInvokerDropdown" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
                    aria-controls="shoppingCartDropdownDropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-unfold-event="click"
                    data-unfold-target="#shoppingCartDropdownDropdown"
                    data-unfold-type="css-animation"
                    data-unfold-duration="300"
                    data-unfold-delay="300"
                    data-unfold-hide-on-scroll="true"
                    data-unfold-animation-in="slideInUp"
                    data-unfold-animation-out="fadeOut">
              <span class="fa fa-shopping-cart btn-icon__inner"></span>
            </a>

            <div id="shoppingCartDropdownDropdown" class="u-unfold u-unfold--cart text-center border rounded-0 right-0 p-7" aria-labelledby="shoppingCartDropdownInvokerDropdown" style="min-width: 250px;">
              <span class="u-icon u-icon--primary u-icon--md rounded-circle mb-3">
                <span class="fa fa-shopping-basket u-icon__inner"></span>
              </span>
              <span class="d-block">Your Cart is Empty</span>
            </div>
          </li>
          <!-- End Shopping Cart -->

          <!-- Account Signin -->
          <li class="nav-item u-header__navbar-icon">
            <!-- Account Sidebar Toggle Button -->
            <a id="sidebarNavTogglerDropdown" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
               aria-controls="sidebarContentBasic"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-hide-on-scroll="false"
               data-unfold-target="#sidebarContentBasic"
               data-unfold-type="css-animation"
               data-unfold-animation-in="fadeInRight"
               data-unfold-animation-out="fadeOutRight"
               data-unfold-duration="500">
              <span class="fa fa-bars btn-icon__inner font-size-13"></span>
            </a>
            <!-- End Account Sidebar Toggle Button -->
          </li>
          <!-- End Account Signin -->
        </ul>
      </nav>
      <!-- End Nav -->
    </div>
  </div>
</header>

<!-- Panel Sidebar Navigation -->
<aside id="sidebarContentDropdown" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarNavTogglerDropdown">
  <div class="u-sidebar__scroller">
    <div class="u-sidebar__container">
      <div class="u-sidebar--panel__footer-offset">
        <!-- Toggle Button -->
        <div class="d-flex align-items-center border-bottom py-4 px-5">
          <h4 class="h5 mb-0">Account</h4>

          <button type="button" class="close u-sidebar__close ml-auto"
                  aria-controls="sidebarContentDropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-unfold-event="click"
                  data-unfold-hide-on-scroll="false"
                  data-unfold-target="#sidebarContentDropdown"
                  data-unfold-type="css-animation"
                  data-unfold-animation-in="fadeInRight"
                  data-unfold-animation-out="fadeOutRight"
                  data-unfold-duration="500">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <!-- End Toggle Button -->

        <!-- Content -->
        <div class="js-scrollbar u-sidebar__body">
          <div class="u-sidebar__content py-5">
            <!-- Title -->
            <div class="py-2 px-5">
              <h4 class="text-uppercase text-muted font-size-13 mb-0">Menu label</h4>
            </div>
            <!-- End Title -->

            <!-- List -->
            <ul class="list-unstyled font-size-14 mb-5">
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/finance-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Dashboard</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/touch-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Activity</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/team-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Team</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/email-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Mailbox</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/projects-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Projects</span>
                  </div>
                </a>
              </li>
            </ul>
            <!-- End List -->

            <!-- Title -->
            <div class="py-2 px-5">
              <h4 class="text-uppercase text-muted font-size-13 mb-0">Sub level</h4>
            </div>
            <!-- End Title -->

            <!-- List -->
            <ul class="list-unstyled font-size-14 mb-0">
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/calendar-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Calendar</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/cog-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Tools</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/archive-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Archive</span>
                  </div>
                </a>
              </li>
            </ul>
            <!-- End List -->
          </div>
        </div>
        <!-- End Content -->
      </div>

      <!-- Footer -->
      <footer class="u-sidebar__footer u-sidebar__footer--panel py-4 px-5">
        <!-- List -->
        <ul class="list-inline font-size-14 mb-0">
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link pr-2" href="#">Privacy</a>
          </li>
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link px-2" href="#">Terms</a>
          </li>
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link pl-2" href="#">
              <i class="fa fa-info-circle"></i>
            </a>
          </li>
        </ul>
        <!-- End List -->
      </footer>
      <!-- End Footer -->
    </div>
  </div>
</aside>
<!-- End Panel Sidebar Navigation -->

<!-- Signup Modal Window -->
<div id="signupModalDropdown" class="js-signup-modal u-modal-window">
  <!-- Modal Close Button -->
  <button class="btn btn-sm btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
    <span class="fas fa-times"></span>
  </button>
  <!-- End Modal Close Button -->

  <!-- Content -->
  <div class="p-5">
    <form class="js-validate">
      <!-- Signin -->
      <div id="signin" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign in</h2>
          <p>Signin to manage your account.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="row mb-3">
          <div class="col-6">
            <!-- Checkbox -->
            <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
              <input type="checkbox" class="custom-control-input" id="rememberMeCheckbox">
              <label class="custom-control-label" for="rememberMeCheckbox">
                Remember Me
              </label>
            </div>
            <!-- End Checkbox -->
          </div>

          <div class="col-6 text-right">
            <a class="js-animation-link float-right" href="javascript:;"
               data-target="#forgotPassword"
               data-link-group="idForm"
               data-animation-in="fadeIn">Forgot Password?</a>
          </div>
        </div>

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signin</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Do not have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signup"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signup
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signin Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signin with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signin with Twitter
            </button>
          </div>
        </div>
        <!-- End Signin Social Buttons -->
      </div>
      <!-- End Signin -->

      <!-- Signup -->
      <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign up</h2>
          <p>Fill out the form to get started.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-key form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="confirmPassword" required
                   placeholder="Confirm Password"
                   aria-label="Confirm Password"
                   data-msg="Password does not match the confirm password."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signup</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signup Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signup with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signup with Twitter
            </button>
          </div>
        </div>
        <!-- End Signup Social Buttons -->
      </div>
      <!-- End Signup -->

      <!-- Forgot Password -->
      <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Recover account</h2>
          <p>Enter your email address and an email with instructions will be sent to you.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Recover Account</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>
      </div>
      <!-- End Forgot Password -->
    </form>
  </div>
  <!-- End Content -->
</div>
<!-- End Signup Modal Window -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/animate.css">
<link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Space -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/helpers/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.malihu-scrollbar.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      afterOpen: function () {
        if (!$('body').hasClass('IE11')) {
          $(this).find('input[type="search"]').focus();
        }
      }
    });

    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#password'
        }
      }
    });

    // initialization of forms
    $.HSCore.helpers.HSFocusState.init();

    // initialization of malihu scrollbar
    $.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));

    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-signup-modal', {
      autonomous: true
    });

    // initialization of show animations
    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
  });
</script>
Copy

With mega menu

HTML:

<header id="headerMegaMenu" class="u-header u-header--bordered">
  <div class="u-header__section">
    <div id="logoAndNavMegaMenu" class="container-fluid">
      <!-- Nav -->
      <nav class="js-mega-menu navbar navbar-expand-lg u-header__navbar">
        <!-- Logo -->
        <div class="u-header__navbar-brand-wrapper">
          <a class="navbar-brand u-header__navbar-brand" href="index.html" aria-label="Space">
            <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo.svg" alt="Logo">
            <img class="u-header__navbar-brand-mobile" src="../../assets/svg/logos/logo-short.svg" alt="Logo">
          </a>
        </div>
        <!-- End Logo -->

        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn u-hamburger u-header__hamburger"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="navBarMegaMenu"
                data-toggle="collapse"
                data-target="#navBarMegaMenu">
          <span class="d-none d-sm-inline-block">Menu</span>
          <span id="hamburgerTriggerMegamenu" class="u-hamburger__box ml-3">
            <span class="u-hamburger__inner"></span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div id="navBarMegaMenu" class="collapse navbar-collapse u-header__navbar-collapse py-0">
          <ul class="navbar-nav u-header__navbar-nav">
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#">
                Home
              </a>
            </li>

            <!-- Mega Menu -->
            <li class="nav-item hs-has-mega-menu u-header__nav-item"
                data-event="hover"
                data-animation-in="slideInUp"
                data-animation-out="fadeOut"
                data-position="left">
              <a id="fourColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                 aria-haspopup="true"
                 aria-expanded="false">
                Mega Menu
                <span class="fa fa-angle-down u-header__nav-link-icon"></span>
              </a>

              <!-- Mega Menu -->
              <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fourColumnsMegaMenu">
                <div class="u-header__mega-menu-wrapper-v1">
                  <ul class="row list-unstyled u-header__mega-menu-list">
                    <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                      <span class="u-header__sub-menu-title">Title</span>

                      <!-- Links -->
                      <ul class="list-unstyled">
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                      </ul>
                      <!-- End Links -->
                    </li>

                    <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                      <span class="u-header__sub-menu-title">Title</span>

                      <!-- Links -->
                      <ul class="list-unstyled">
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                      </ul>
                      <!-- End Links -->
                    </li>

                    <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                      <span class="u-header__sub-menu-title">Title</span>

                      <!-- Links -->
                      <ul class="list-unstyled">
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                      </ul>
                      <!-- End Links -->
                    </li>

                    <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
                      <span class="u-header__sub-menu-title">Title</span>

                      <!-- Links -->
                      <ul class="list-unstyled">
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                        <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                      </ul>
                      <!-- End Links -->
                    </li>
                  </ul>
                </div>
              </div>
              <!-- End Mega Menu -->
            </li>
            <!-- End Mega Menu -->

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

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

            <!-- Button -->
            <li class="nav-item u-header__nav-item-btn">
              <a class="btn btn-sm btn-primary" href="#signupModalMegaMenu" role="button"
                 data-modal-target="#signupModalMegaMenu"
                 data-overlay-color="#151b26">
                <span class="fa fa-user-circle mr-1"></span>
                Signin
              </a>
            </li>
            <!-- End Button -->

            <!-- Search -->
            <li class="nav-item u-header__navbar-icon u-header__navbar-v-divider">
              <a class="btn btn-xs btn-icon btn-text-dark u-header__search-toggle" href="javascript:;" role="button"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-controls="searchMegaMenu"
                 data-unfold-target="#searchMegaMenu"
                 data-unfold-hide-on-scroll="false"
                 data-unfold-type="css-animation"
                 data-unfold-duration="300"
                 data-unfold-delay="300"
                 data-unfold-animation-in="slideInUp">
                <span class="fa fa-search btn-icon__inner"></span>
              </a>

              <!-- Input -->
              <form id="searchMegaMenu" class="js-focus-state input-group form u-header__search u-unfold--css-animation u-unfold--hidden">
                <input class="form-control form__input" type="search" placeholder="Search Space">
                <div class="input-group-addon u-header__search-addon p-0">
                  <button class="btn btn-primary u-header__search-addon-btn" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                </div>
              </form>
              <!-- End Input -->
            </li>
            <!-- End Search -->
          </ul>
        </div>
        <!-- End Navigation -->

        <ul class="navbar-nav flex-row u-header__secondary-nav">
          <!-- Shopping Cart -->
          <li class="nav-item u-header__navbar-icon-wrapper u-header__navbar-icon">
            <a id="shoppingCartMegaMenuInvokerMegaMenu" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
                    aria-controls="shoppingCartMegaMenuMegaMenu"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-unfold-event="click"
                    data-unfold-target="#shoppingCartMegaMenuMegaMenu"
                    data-unfold-type="css-animation"
                    data-unfold-duration="300"
                    data-unfold-delay="300"
                    data-unfold-hide-on-scroll="true"
                    data-unfold-animation-in="slideInUp"
                    data-unfold-animation-out="fadeOut">
              <span class="fa fa-shopping-cart btn-icon__inner"></span>
            </a>

            <div id="shoppingCartMegaMenuMegaMenu" class="u-unfold u-unfold--cart text-center border rounded-0 right-0 p-7" aria-labelledby="shoppingCartMegaMenuInvokerMegaMenu" style="min-width: 250px;">
              <span class="u-icon u-icon--primary u-icon--md rounded-circle mb-3">
                <span class="fa fa-shopping-basket u-icon__inner"></span>
              </span>
              <span class="d-block">Your Cart is Empty</span>
            </div>
          </li>
          <!-- End Shopping Cart -->

          <!-- Account Signin -->
          <li class="nav-item u-header__navbar-icon">
            <!-- Account Sidebar Toggle Button -->
            <a id="sidebarNavTogglerMegaMenu" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
               aria-controls="sidebarContentMegaMenu"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-hide-on-scroll="false"
               data-unfold-target="#sidebarContentMegaMenu"
               data-unfold-type="css-animation"
               data-unfold-animation-in="fadeInRight"
               data-unfold-animation-out="fadeOutRight"
               data-unfold-duration="500">
              <span class="fa fa-bars btn-icon__inner font-size-13"></span>
            </a>
            <!-- End Account Sidebar Toggle Button -->
          </li>
          <!-- End Account Signin -->
        </ul>
      </nav>
      <!-- End Nav -->
    </div>
  </div>
</header>

<!-- Panel Sidebar Navigation -->
<aside id="sidebarContentMegaMenu" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarNavTogglerMegaMenu">
  <div class="u-sidebar__scroller">
    <div class="u-sidebar__container">
      <div class="u-sidebar--panel__footer-offset">
        <!-- Toggle Button -->
        <div class="d-flex align-items-center border-bottom py-4 px-5">
          <h4 class="h5 mb-0">Account</h4>

          <button type="button" class="close u-sidebar__close ml-auto"
                  aria-controls="sidebarContentMegaMenu"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-unfold-event="click"
                  data-unfold-hide-on-scroll="false"
                  data-unfold-target="#sidebarContentMegaMenu"
                  data-unfold-type="css-animation"
                  data-unfold-animation-in="fadeInRight"
                  data-unfold-animation-out="fadeOutRight"
                  data-unfold-duration="500">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <!-- End Toggle Button -->

        <!-- Content -->
        <div class="js-scrollbar u-sidebar__body">
          <div class="u-sidebar__content py-5">
            <!-- Title -->
            <div class="py-2 px-5">
              <h4 class="text-uppercase text-muted font-size-13 mb-0">Menu label</h4>
            </div>
            <!-- End Title -->

            <!-- List -->
            <ul class="list-unstyled font-size-14 mb-5">
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/finance-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Dashboard</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/touch-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Activity</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/team-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Team</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/email-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Mailbox</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/projects-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Projects</span>
                  </div>
                </a>
              </li>
            </ul>
            <!-- End List -->

            <!-- Title -->
            <div class="py-2 px-5">
              <h4 class="text-uppercase text-muted font-size-13 mb-0">Sub level</h4>
            </div>
            <!-- End Title -->

            <!-- List -->
            <ul class="list-unstyled font-size-14 mb-0">
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/calendar-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Calendar</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/cog-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Tools</span>
                  </div>
                </a>
              </li>
              <li>
                <a class="media align-items-center u-sidebar--panel__link py-2 px-5" href="#">
                  <img class="max-width-4 mr-3" src="../../assets/svg/components/archive-dark-icon.svg" alt="Image Description">
                  <div class="media-body">
                    <span>Archive</span>
                  </div>
                </a>
              </li>
            </ul>
            <!-- End List -->
          </div>
        </div>
        <!-- End Content -->
      </div>

      <!-- Footer -->
      <footer class="u-sidebar__footer u-sidebar__footer--panel py-4 px-5">
        <!-- List -->
        <ul class="list-inline font-size-14 mb-0">
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link pr-2" href="#">Privacy</a>
          </li>
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link px-2" href="#">Terms</a>
          </li>
          <li class="list-inline-item">
            <a class="u-sidebar--panel__link pl-2" href="#">
              <i class="fa fa-info-circle"></i>
            </a>
          </li>
        </ul>
        <!-- End List -->
      </footer>
      <!-- End Footer -->
    </div>
  </div>
</aside>
<!-- End Panel Sidebar Navigation -->

<!-- Signup Modal Window -->
<div id="signupModalMegaMenu" class="js-signup-modal u-modal-window">
  <!-- Modal Close Button -->
  <button class="btn btn-sm btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
    <span class="fas fa-times"></span>
  </button>
  <!-- End Modal Close Button -->

  <!-- Content -->
  <div class="p-5">
    <form class="js-validate">
      <!-- Signin -->
      <div id="signin" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign in</h2>
          <p>Signin to manage your account.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="row mb-3">
          <div class="col-6">
            <!-- Checkbox -->
            <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
              <input type="checkbox" class="custom-control-input" id="rememberMeCheckbox">
              <label class="custom-control-label" for="rememberMeCheckbox">
                Remember Me
              </label>
            </div>
            <!-- End Checkbox -->
          </div>

          <div class="col-6 text-right">
            <a class="js-animation-link float-right" href="javascript:;"
               data-target="#forgotPassword"
               data-link-group="idForm"
               data-animation-in="fadeIn">Forgot Password?</a>
          </div>
        </div>

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signin</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Do not have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signup"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signup
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signin Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signin with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signin with Twitter
            </button>
          </div>
        </div>
        <!-- End Signin Social Buttons -->
      </div>
      <!-- End Signin -->

      <!-- Signup -->
      <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Please sign up</h2>
          <p>Fill out the form to get started.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-lock form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="password" required
                   placeholder="Password"
                   aria-label="Password"
                   data-msg="Your password is invalid. Please try again."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-key form__text-inner"></span>
              </span>
            </div>
            <input type="password" class="form-control form__input" name="confirmPassword" required
                   placeholder="Confirm Password"
                   aria-label="Confirm Password"
                   data-msg="Password does not match the confirm password."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Signup</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>

        <!-- Divider -->
        <div class="text-center u-divider-wrapper my-3">
          <span class="u-divider u-divider--xs u-divider--text">OR</span>
        </div>
        <!-- End Divider -->

        <!-- Signup Social Buttons -->
        <div class="row mx-gutters-2 mb-4">
          <div class="col-sm-6 mb-2 mb-sm-0">
            <button type="button" class="btn btn-block btn-facebook">
              <span class="fab fa-facebook-f mr-2"></span>
              Signup with Facebook
            </button>
          </div>
          <div class="col-sm-6">
            <button type="button" class="btn btn-block btn-twitter">
              <span class="fab fa-twitter mr-2"></span>
              Signup with Twitter
            </button>
          </div>
        </div>
        <!-- End Signup Social Buttons -->
      </div>
      <!-- End Signup -->

      <!-- Forgot Password -->
      <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Title -->
        <header class="text-center mb-5">
          <h2 class="h4 mb-0">Recover account</h2>
          <p>Enter your email address and an email with instructions will be sent to you.</p>
        </header>
        <!-- End Title -->

        <!-- Input -->
        <div class="js-form-message mb-3">
          <div class="js-focus-state input-group form">
            <div class="input-group-prepend form__prepend">
              <span class="input-group-text form__text">
                <span class="fa fa-user form__text-inner"></span>
              </span>
            </div>
            <input type="email" class="form-control form__input" name="email" required
                   placeholder="Email"
                   aria-label="Email"
                   data-msg="Please enter a valid email address."
                   data-error-class="u-has-error"
                   data-success-class="u-has-success">
          </div>
        </div>
        <!-- End Input -->

        <div class="mb-3">
          <button type="submit" class="btn btn-block btn-primary">Recover Account</button>
        </div>

        <div class="text-center mb-3">
          <p class="text-muted">
            Have an account?
            <a class="js-animation-link" href="javascript:;"
               data-target="#signin"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signin
            </a>
          </p>
        </div>
      </div>
      <!-- End Forgot Password -->
    </form>
  </div>
  <!-- End Content -->
</div>
<!-- End Signup Modal Window -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/animate.css">
<link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Space -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/helpers/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.malihu-scrollbar.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      afterOpen: function () {
        if (!$('body').hasClass('IE11')) {
          $(this).find('input[type="search"]').focus();
        }
      }
    });

    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#password'
        }
      }
    });

    // initialization of forms
    $.HSCore.helpers.HSFocusState.init();

    // initialization of malihu scrollbar
    $.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));

    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-signup-modal', {
      autonomous: true
    });

    // initialization of show animations
    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
  });
</script>
Copy

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.

.u-header__navbar-brand-top-space removes the padding-top CSS parameter of .u-header__navbar-brand when nav links are less and at the level of the Logo (navbar-brand).

<header id="headerBrand" class="u-header u-header--bordered">
  <div class="u-header__section">
    <div class="container-fluid">
      <nav class="navbar navbar-expand-md u-header__navbar">
        <!-- Logo -->
        <div class="u-header__navbar-brand-wrapper">
          <a class="navbar-brand u-header__navbar-brand" href="index.html" aria-label="Space">
            <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo.svg" alt="Logo">
            <img class="u-header__navbar-brand-mobile" src="../../assets/svg/logos/logo-short.svg" alt="Logo">
          </a>
        </div>
        <!-- End Logo -->
      </nav>
    </div>
  </div>
</header>
Copy

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 hs.scroll-nav.js plugin, add #section-name to the href element you want to be scrolled to a certain content.

<header id="headerOnepagNav" class="u-header u-header--bordered">
  <div class="u-header__section">
    <div id="logoAndNavOnepagNav" class="container-fluid">
      <!-- Nav -->
      <nav class="navbar navbar-expand-lg u-header__navbar">
        <!-- Logo -->
        <div class="u-header__navbar-brand-wrapper">
          <a class="navbar-brand u-header__navbar-brand" href="#homeSection" aria-label="Space">
            <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo.svg" alt="Logo">
            <img class="u-header__navbar-brand-mobile" src="../../assets/svg/logos/logo-short.svg" alt="Logo">
          </a>
        </div>
        <!-- End Logo -->

        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn u-hamburger u-header__hamburger"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="navBarOnepagNav"
                data-toggle="collapse"
                data-target="#navBarOnepagNav">
          <span class="d-none d-sm-inline-block">Menu</span>
          <span id="hamburgerTriggerOnePageNav" class="u-hamburger__box ml-3">
            <span class="u-hamburger__inner"></span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div id="navBarOnepagNav" class="collapse navbar-collapse u-header__navbar-collapse py-0">
          <ul id="scrollNav" class="navbar-nav u-header__navbar-nav">
            <!-- Home -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#homeSection">Home</a>
            </li>
            <!-- End Home -->

            <!-- Pages -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#pagesSection">Pages</a>
            </li>
            <!-- End Pages -->

            <!-- Works -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#worksSection">Works</a>
            </li>
            <!-- End Works -->

            <!-- Blog -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#blogSection">Blog</a>
            </li>
            <!-- End Blog -->

            <!-- Specialty -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#specialtySection">Specialty</a>
            </li>
            <!-- End Specialty -->

            <!-- Starter - Link -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../index.html">
                Starter
              </a>
            </li>
            <!-- End Starter - Link -->

            <!-- Button -->
            <li class="nav-item u-header__nav-item-btn">
              <a class="btn btn-sm btn-primary" href="#signupModalOnepagNav" role="button"
                 data-modal-target="#signupModalOnepagNav"
                 data-overlay-color="#151b26">
                <span class="fa fa-user-circle mr-1"></span>
                Signin
              </a>
            </li>
            <!-- End Button -->

            <!-- Search -->
            <li class="nav-item u-header__navbar-icon u-header__navbar-v-divider">
              <a class="btn btn-xs btn-icon btn-text-dark u-header__search-toggle" href="javascript:;" role="button"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-controls="searchOnepagNav"
                 data-unfold-target="#searchOnepagNav"
                 data-unfold-hide-on-scroll="false"
                 data-unfold-type="css-animation"
                 data-unfold-duration="300"
                 data-unfold-delay="300"
                 data-unfold-animation-in="slideInUp">
                <span class="fa fa-search btn-icon__inner"></span>
              </a>

              <!-- Input -->
              <form id="searchOnepagNav" class="js-focus-state input-group form u-header__search u-unfold--css-animation u-unfold--hidden">
                <input class="form-control form__input" type="search" placeholder="Search Space">
                <div class="input-group-addon u-header__search-addon p-0">
                  <button class="btn btn-primary u-header__search-addon-btn" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                </div>
              </form>
              <!-- End Input -->
            </li>
            <!-- End Search -->
          </ul>
        </div>
        <!-- End Navigation -->

        <ul class="navbar-nav flex-row u-header__secondary-nav">
          <!-- Shopping Cart -->
          <li class="nav-item u-header__navbar-icon-wrapper u-header__navbar-icon">
            <a id="shoppingCartDropdownInvokerOnepagNav" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
                    aria-controls="shoppingCartDropdownOnepagNav"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-unfold-event="click"
                    data-unfold-target="#shoppingCartDropdownOnepagNav"
                    data-unfold-type="css-animation"
                    data-unfold-duration="300"
                    data-unfold-delay="300"
                    data-unfold-hide-on-scroll="true"
                    data-unfold-animation-in="slideInUp"
                    data-unfold-animation-out="fadeOut">
              <span class="fa fa-shopping-cart btn-icon__inner"></span>
            </a>

            <div id="shoppingCartDropdownOnepagNav" class="u-unfold u-unfold--cart text-center border rounded-0 right-0 p-7" aria-labelledby="shoppingCartDropdownInvokerOnepagNav" style="min-width: 250px;">
              <span class="u-icon u-icon--primary u-icon--md rounded-circle mb-3">
                <span class="fa fa-shopping-basket u-icon__inner"></span>
              </span>
              <span class="d-block">Your Cart is Empty</span>
            </div>
          </li>
          <!-- End Shopping Cart -->

          <!-- Account Signin -->
          <li class="nav-item u-header__navbar-icon">
            <!-- Account Sidebar Toggle Button -->
            <a id="sidebarNavTogglerOnePageNav" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
               aria-controls="sidebarContentOnePageNav"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-hide-on-scroll="false"
               data-unfold-target="#sidebarContentOnePageNav"
               data-unfold-type="css-animation"
               data-unfold-animation-in="fadeInRight"
               data-unfold-animation-out="fadeOutRight"
               data-unfold-duration="500">
              <span class="fa fa-bars btn-icon__inner font-size-13"></span>
            </a>
            <!-- End Account Sidebar Toggle Button -->
          </li>
          <!-- End Account Signin -->
        </ul>
      </nav>
      <!-- End Nav -->
    </div>
  </div>
</header>
Copy

You can also use dropdowns.

<header id="headerOnepagNavDropdown" class="u-header u-header--bordered">
  <div class="u-header__section">
    <div id="logoAndNavOnepagNavDropdown" class="container-fluid">
      <!-- Nav -->
      <nav class="js-mega-menu navbar navbar-expand-lg u-header__navbar">
        <!-- Logo -->
        <div class="u-header__navbar-brand-wrapper">
          <a class="navbar-brand u-header__navbar-brand" href="#homeSection" aria-label="Space">
            <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo.svg" alt="Logo">
            <img class="u-header__navbar-brand-mobile" src="../../assets/svg/logos/logo-short.svg" alt="Logo">
          </a>
        </div>
        <!-- End Logo -->

        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn u-hamburger u-header__hamburger"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="navBarOnepagNavDropdown"
                data-toggle="collapse"
                data-target="#navBarOnepagNavDropdown">
          <span class="d-none d-sm-inline-block">Menu</span>
          <span id="hamburgerTriggerOnePageNavDropdown" class="u-hamburger__box ml-3">
            <span class="u-hamburger__inner"></span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div id="navBarOnepagNavDropdown" class="collapse navbar-collapse u-header__navbar-collapse py-0">
          <ul id="scrollNavDropdown" class="navbar-nav u-header__navbar-nav">
            <!-- Home -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#homeSection">Home</a>
            </li>
            <!-- End Home -->

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

              <ul id="pagesSubMenu" class="list-inline hs-sub-menu u-header__sub-menu mb-0" style="min-width: 220px;"
                  aria-labelledby="pagesMegaMenu">
                <li class="dropdown-item">
                  <a class="nav-link u-header__sub-menu-nav-link" href="#aboutSection">About</a>
                </li>
                <li class="dropdown-item">
                  <a class="nav-link u-header__sub-menu-nav-link" href="#servicesSection">Services</a>
                </li>
                <li class="dropdown-item">
                  <a class="nav-link u-header__sub-menu-nav-link" href="#contactsSection">Contacts</a>
                </li>
              </ul>
            </li>
            <!-- End Pages -->

            <!-- Works -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#worksSection">Works</a>
            </li>
            <!-- End Works -->

            <!-- Blog -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#blogSection">Blog</a>
            </li>
            <!-- End Blog -->

            <!-- Specialty -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="#specialtySection">Specialty</a>
            </li>
            <!-- End Specialty -->

            <!-- Starter - Link -->
            <li class="nav-item u-header__nav-item">
              <a class="nav-link u-header__nav-link" href="../index.html">
                Starter
              </a>
            </li>
            <!-- End Starter - Link -->

            <!-- Button -->
            <li class="nav-item u-header__nav-item-btn">
              <a class="btn btn-sm btn-primary" href="#signupModalOnepagNavDropdown" role="button"
                 data-modal-target="#signupModalOnepagNavDropdown"
                 data-overlay-color="#151b26">
                <span class="fa fa-user-circle mr-1"></span>
                Signin
              </a>
            </li>
            <!-- End Button -->

            <!-- Search -->
            <li class="nav-item u-header__navbar-icon u-header__navbar-v-divider">
              <a class="btn btn-xs btn-icon btn-text-dark u-header__search-toggle" href="javascript:;" role="button"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-controls="searchOnepagNavDropdown"
                 data-unfold-target="#searchOnepagNavDropdown"
                 data-unfold-hide-on-scroll="false"
                 data-unfold-type="css-animation"
                 data-unfold-duration="300"
                 data-unfold-delay="300"
                 data-unfold-animation-in="slideInUp">
                <span class="fa fa-search btn-icon__inner"></span>
              </a>

              <!-- Input -->
              <form id="searchOnepagNavDropdown" class="js-focus-state input-group form u-header__search u-unfold--css-animation u-unfold--hidden">
                <input class="form-control form__input" type="search" placeholder="Search Space">
                <div class="input-group-addon u-header__search-addon p-0">
                  <button class="btn btn-primary u-header__search-addon-btn" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                </div>
              </form>
              <!-- End Input -->
            </li>
            <!-- End Search -->
          </ul>
        </div>
        <!-- End Navigation -->

        <ul class="navbar-nav flex-row u-header__secondary-nav">
          <!-- Shopping Cart -->
          <li class="nav-item u-header__navbar-icon-wrapper u-header__navbar-icon">
            <a id="shoppingCartDropdownInvokerOnepagNavDropdown" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
                    aria-controls="shoppingCartDropdownInvokerOnepagNavDropdownList"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-unfold-event="click"
                    data-unfold-target="#shoppingCartDropdownInvokerOnepagNavDropdownList"
                    data-unfold-type="css-animation"
                    data-unfold-duration="300"
                    data-unfold-delay="300"
                    data-unfold-hide-on-scroll="true"
                    data-unfold-animation-in="slideInUp"
                    data-unfold-animation-out="fadeOut">
              <span class="fa fa-shopping-cart btn-icon__inner"></span>
            </a>

            <div id="shoppingCartDropdownInvokerOnepagNavDropdownList" class="u-unfold u-unfold--cart text-center border rounded-0 right-0 p-7" aria-labelledby="shoppingCartDropdownInvokerOnepagNavDropdown" style="min-width: 250px;">
              <span class="u-icon u-icon--primary u-icon--md rounded-circle mb-3">
                <span class="fa fa-shopping-basket u-icon__inner"></span>
              </span>
              <span class="d-block">Your Cart is Empty</span>
            </div>
          </li>
          <!-- End Shopping Cart -->

          <!-- Account Signin -->
          <li class="nav-item u-header__navbar-icon">
            <!-- Account Sidebar Toggle Button -->
            <a id="sidebarNavTogglerOnePageNavDropdown" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
               aria-controls="sidebarContentOnePageNavDropdown"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-hide-on-scroll="false"
               data-unfold-target="#sidebarContentOnePageNavDropdown"
               data-unfold-type="css-animation"
               data-unfold-animation-in="fadeInRight"
               data-unfold-animation-out="fadeOutRight"
               data-unfold-duration="500">
              <span class="fa fa-bars btn-icon__inner font-size-13"></span>
            </a>
            <!-- End Account Sidebar Toggle Button -->
          </li>
          <!-- End Account Signin -->
        </ul>
      </nav>
      <!-- End Nav -->
    </div>
  </div>
</header>
Copy

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Apply the parent .u-header--navbar-bg class next to .u-header class, choose from .bg-primary for use with primary background colors, or .bg-dark for dark background colors. Then, customize with .bg-* utilities.

<header id="headerPrimary" class="u-header u-header--bordered u-header--navbar-bg">
  <div class="u-header__section bg-primary">
    <!-- Navbar content -->
  </div>
</header>

<header id="headerDark" class="u-header u-header--bordered u-header--navbar-bg">
  <div class="u-header__section bg-dark">
    <!-- Navbar content -->
  </div>
</header>
Copy

Transparent

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

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

<header id="headerTransparent" class="u-header u-header--bordered u-header--white-nav-links u-header--bg-transparent">
  <div class="u-header__section">
    <!-- Navbar content -->
  </div>
</header>
Copy

And here's an example with border.

<header id="headerTransparentBorderless" class="u-header u-header--bordered u-header--white-nav-links u-header--bg-transparent">
  <div class="u-header__section u-header__section-divider">
    <!-- Navbar content -->
  </div>
</header>
Copy

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

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

Example page: Absolute top

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

Example page: Absolute bottom

Absolute bottom 
<header id="headerPlacementAbsBottom" class="u-header u-header--abs-bottom">
  <a class="navbar-brand" href="#">Absolute bottom</a>
</header>
Copy

Example page: Absolute top second screen

Absolute top second screen 
<header id="headerPlacementAbsTop2ndScreen" class="u-header u-header--abs-top-2nd-screen">
  <a class="navbar-brand" href="#">Absolute top second screen</a>
</header>
Copy

Example page: Stick top

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

Example page: Stick bottom

Sticky bottom 
<header id="headerPlacementStickyBottom" class="u-header u-header--sticky-bottom">
  <a class="navbar-brand" href="#">Sticky bottom</a>
</header>
Copy

Example page: Floating

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

Responsive behaviors

Placement classes can utilize .u-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.

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-header-fix-moment="".

Attribute Description

data-header-fix-moment

 Changes navbar behavior at the time specified by the user.

data-header-fix-effect

 Show/hide effect of an element. Available options:
  • slide
  • fade
  • show-hide

data-header-fix-exclude

 All the listed classes in this attribute will be removed from the section at the time of commit.

data-header-fix-classes

 All the listed classes in this attribute will be added to the section at the time of the commit.

data-effect-compensation

 Defines if the data-effect-compensation-* attributes should be enabled.

data-effect-compensation-start-class

 Points to the class that will be replaced with specified class in the data-effect-compensation-end-class.

data-effect-compensation-end-class

 Points to the class that will be replaced with specified class in data-effect-compensation-start-class, at the value of scroll specified in the data-header-fix-moment.

Placement classes

List of available classes and their descriptions.

Class Description

u-header--static-{media-type}

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

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

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

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

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

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

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

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

u-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 u-header__navbar-brand" href="#" aria-label="Space">
  <img class="u-header__navbar-brand-default" src="../../assets/svg/logos/logo-white.svg" alt="Logo">
  <img class="u-header__navbar-brand-on-scroll" src="../../assets/svg/logos/logo.svg" alt="Logo">
</a>
Copy

u-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="u-header__section u-header__section--light bg-secondary"
     data-header-fix-moment-exclude="u-header__section--light bg-secondary"
     data-header-fix-moment-classes="u-header__section--primary bg-primary">
Copy
In this case, to change the section from gray to dark, we remove u-header__section--light bg-secondary (which by default is on this element) and add u-header__section--primary bg-primary.

u-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 .u-header__section--hidden.

u-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 Space 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="u-header--toggle-section u-header--invulnerable-md">
  ...
</header>
Copy
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="u-header--show-hide-lg u-header--abs-top-lg">
  ...
</header>
Copy

Behavior classes

List of available classes and their descriptions.

These placement classes can have the following behavior classes Description

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

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

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

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

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

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

Behavior examples

.u-header--show-hide

data-header-fix-moment="500"
data-header-fix-effect="slide"
Copy

.u-header--change-logo

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

.u-header--change-appearance

<header class="u-header__section u-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>
Copy

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR

Please sign in

Signin to manage your account.

Forgot Password?

Do not have an account? Signup

OR