Logo
  • Landings
    Landings

    Accelerate the way your business builds modern sites at scale.

    Learn more

    Why Unify Template

    Classic Corporate Business New Consulting New SaaS Services
  • Pages
    Company Company Portfolio Specialty pages Blog
    Latest from the Blog
    Documentation

    Development guides for building projects with Unify

    Learn more
    Snippets

    Move quickly with copy-to-clipboard feature

    Learn more
    Classic New New Docs
    Documentation v3.2.2

    Development guides for building projects with Unify

    Snippets

    Move quickly with copy-to-clipboard feature

  • Sticky Top Toggle

    • HTML
    • CSS
    • JS
                  
                    <!-- ========== HEADER ========== -->
                    <header id="header" class="navbar navbar-expand-lg navbar-end navbar-sticky-top navbar-show-hide navbar-light"
                            data-hs-header-options='{
                              "fixMoment": 500,
                              "fixEffect": "slide"
                            }'>
                      <div class="container">
                        <nav class="js-mega-menu navbar-nav-wrap">
                          <!-- Default Logo -->
                          <a class="navbar-brand" href="../index.ppp aria-label="Mid-Continent Funding, Inc."ntinent Funding, Inc.">
                            <img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
                          </a>
                          <!-- End Default Logo -->
    
                          <!-- Toggler -->
                          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-default">
                              <i class="bi-list"></i>
                            </span>
                            <span class="navbar-toggler-toggled">
                              <i class="bi-x"></i>
                            </span>
                          </button>
                          <!-- End Toggler -->
                        
                          <!-- Collapse -->
                          <div class="collapse navbar-collapse" id="navbarNavDropdown">
                            <div class="navbar-sticky-top-scroller">
                              <ul class="navbar-nav nav-pills">
                                <!-- Landings -->
                                <li class="hs-has-mega-menu nav-item"
                                    data-hs-mega-menu-item-options='{
                                      "desktop": {
                                        "maxWidth": "40rem"
                                      }
                                    }'>
                                  <a id="landingsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " aria-current="page" href="#" role="button" aria-expanded="false">Landings</a>
    
                                  <!-- Mega Menu -->
                                  <div class="hs-mega-menu dropdown-menu" aria-labelledby="landingsMegaMenu" style="min-width: 25rem;">
                                    <!-- Main Content -->
                                    <div class="row">
                                      <div class="col-lg d-none d-lg-block">
                                        <div class="d-flex align-items-start flex-column bg-light rounded-3 h-100 p-4">
                                          <span class="fs-3 fw-bold d-block">Landings</span>
                                          <p class="text-body">Accelerate the way your business builds modern sites at scale.</p>
                                          <div class="mt-auto">
                                            <p class="mb-1"><a class="link link-dark link-pointer" href="#">Learn more</a></p>
                                            <p class="mb-1"><a class="link link-dark link-pointer" href="#">Why Unify Template</a></p>
                                          </div>
                                        </div>
                                      </div>
    
                                      <div class="col-sm">
                                        <div class="navbar-dropdown-menu-inner">
                                          <span class="dropdown-header">Classic</span>
                                          <a class="dropdown-item " href="../index.ppp><i class="bi-building me-2"></i> Corporate</a>
                                          <a class="dropdown-item " href="../landing-business.ppp><i class="bi-briefcase me-2"></i> Business <span class="badge text-primary">New</span></a>
                                          <a class="dropdown-item " href="../landing-consulting.ppp><i class="bi-chat-right-dots me-2"></i> Consulting <span class="badge text-primary">New</span></a>
                                          <a class="dropdown-item " href="../landing-saas.ppp><i class="bi-tropical-storm me-2"></i> SaaS</a>
                                          <a class="dropdown-item " href="../landing-services.ppp><i class="bi-gear me-2"></i> Services</a>
                                        </div>
                                      </div>
                                    </div>
                                    <!-- End Main Content -->
                                  </div>
                                  <!-- End Mega Menu -->
                                </li>
                                <!-- End Landings -->
    
                                <!-- Pages -->
                                <li class="hs-has-mega-menu nav-item">
                                  <a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Pages</a>
    
                                  <!-- Mega Menu -->
                                  <div class="hs-mega-menu hs-position-right dropdown-menu w-100" aria-labelledby="pagesMegaMenu" style="min-width: 42rem;">
                                    <!-- Main Content -->
                                    <div class="navbar-dropdown-menu-inner">
                                      <div class="row">
                                        <div class="col-sm-6 col-md-3">
                                          <span class="dropdown-header">Company</span>
                                          <a class="dropdown-item " href="../page-about"gt;About</a>
                                          <a class="dropdown-item " href="../page-customer-stories"gt;Customer Stories</a>
                                          <a class="dropdown-item " href="../page-customer-story"gt;Customer Story</a>
                                          <a class="dropdown-item " href="../page-help-center"gt;Help Center</a>
                                          <a class="dropdown-item " href="../page-help-center-categories"gt;Help Center: Categories</a>
                                          <a class="dropdown-item " href="../page-help-center-article"gt;Help Center: Article</a>
                                        </div>
    
                                        <div class="col-sm-6 col-md-3 mb-3 mb-md-0">
                                          <span class="dropdown-header invisible">Company</span>
                                          <a class="dropdown-item " href="../page-careers"gt;Careers</a>
                                          <a class="dropdown-item " href="../page-careers-role-overview"gt;Careers: Role Overview</a>
                                          <a class="dropdown-item " href="../page-careers-apply"gt;Careers: Apply</a>
                                          <a class="dropdown-item " href="../page-hire-us"gt;Hire Us</a>
                                          <a class="dropdown-item " href="../page-login"gt;Log In</a>
                                          <a class="dropdown-item " href="../page-signup"gt;Sign Up</a>
                                          <a class="dropdown-item " href="../page-reset-password"gt;Forgot Password</a>
                                        </div>
    
                                        <div class="col-sm-6 col-md-3 mb-3 mb-md-0">
                                          <span class="dropdown-header">Portfolio</span>
                                          <a class="dropdown-item " href="../portfolio-modern"gt;Modern</a>
                                          <a class="dropdown-item " href="../portfolio-case-study"gt;Case Study</a>
                                        </div>
    
                                        <div class="col-sm-6 col-md-3">
                                          <span class="dropdown-header">Specialty pages</span>
                                          <a class="dropdown-item " href="../page-pricing"gt;Pricing</a>
                                          <a class="dropdown-item " href="../page-contacts"gt;Contacts</a>
                                          <a class="dropdown-item " href="../page-coming-soon"gt;Coming Soon</a>
                                          <a class="dropdown-item " href="../page-coming-soon-simple"gt;Coming Soon: Simple</a>
                                          <a class="dropdown-item " href="../page-error-404"gt;Error 404</a>
                                          <a class="dropdown-item " href="../page-terms"gt;Terms & Conditions</a>
                                          <a class="dropdown-item " href="../page-privacy"gt;Privacy & Policy</a>
                                        </div>
                                      </div>
                                      <!-- End Row -->
                                    </div>
                                    <!-- End Main Content -->
                                  </div>
                                  <!-- End Mega Menu -->
                                </li>
                                <!-- End Pages -->
    
                                <!-- Blog -->
                                <li class="hs-has-mega-menu nav-item"
                                    data-hs-mega-menu-item-options='{
                                      "desktop": {
                                        "maxWidth": "50rem"
                                      }
                                    }'>
                                  <a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Blog</a>
    
                                  <!-- Mega Menu -->
                                  <div class="hs-mega-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 12rem;">
                                    <!-- Main Content -->
                                    <div class="row">
                                      <div class="col-lg d-none d-lg-block">
                                        <div class="bg-light rounded-3 h-100 p-4">
                                          <span class="d-block fs-4 fw-bold text-dark mb-3">Latest from the Blog</span>
    
                                          <div class="row">
                                            <div class="col-md-6 mb-3 mb-md-0">
                                              <!-- Card -->
                                              <a class="d-block" href="../documentation/index"gt;
                                                <img class="img-fluid rounded-2 mb-2" src="../assets/svg/components/card-1.svg" alt="Image Description">
    
                                                <span class="fs-4 fw-medium text-dark text-inherit">Documentation</span>
                                                <p class="fs-6 text-body">Development guides for building projects with Unify</p>
                                                <span class="link link-pointer">Learn more</span>
                                              </a>
                                              <!-- End Card -->
                                            </div>
                                            <!-- End Col -->
    
                                            <div class="col-md-6">
                                              <!-- Card -->
                                              <a class="d-block" href="../snippets/index"gt;
                                                <img class="img-fluid rounded-2 mb-2" src="../assets/svg/components/card-2.svg" alt="Image Description">
    
                                                <span class="fs-4 fw-medium text-dark text-inherit">Snippets</span>
                                                <p class="fs-6 text-body">Move quickly with copy-to-clipboard feature</p>
                                                <span class="link link-pointer">Learn more</span>
                                              </a>
                                              <!-- End Card -->
                                            </div>
                                            <!-- End Col -->
                                          </div>
                                          <!-- End Row -->
                                        </div>
                                      </div>
    
                                      <div class="col-lg-4">
                                        <div class="navbar-dropdown-menu-inner">
                                          <span class="dropdown-header">Classic</span>
                                          <a class="dropdown-item " href="../blog-modern"gt;Modern <span class="badge text-primary">New</span></a>
                                          <a class="dropdown-item " href="../blog-grid"gt;Grid</a>
                                          <a class="dropdown-item " href="../blog-list"gt;List</a>
                                          <a class="dropdown-item " href="../blog-article"gt;Article <span class="badge text-primary">New</span></a>
                                          <a class="dropdown-item " href="../blog-author-profile"gt;Author Profile</a>
                                        </div>
                                      </div>
                                    </div>
                                    <!-- End Main Content -->
                                  </div>
                                  <!-- End Mega Menu -->
                                </li>
                                <!-- End Blog -->
    
                                <!-- Docs -->
                                <li class="hs-has-mega-menu nav-item"
                                    data-hs-mega-menu-item-options='{
                                      "desktop": {
                                        "maxWidth": "20rem"
                                      }
                                    }'>
                                  <a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Docs</a>
    
                                  <!-- Mega Menu -->
                                  <div class="hs-mega-menu hs-position-right-fix dropdown-menu" aria-labelledby="docsMegaMenu" style="min-width: 20rem;">
                                    <!-- Link -->
                                    <a class="navbar-dropdown-menu-media-link" href="../documentation/index"gt;
                                      <div class="d-flex">
                                        <div class="flex-shrink-0">
                                          <i class="bi-file-earmark-text fs-2 text-dark"></i>
                                        </div>
    
                                        <div class="flex-grow-1 ms-3">
                                          <span class="navbar-dropdown-menu-media-title">Documentation <span class="badge badge-sm bg-primary rounded-pill ms-1">v3.1</span></span>
                                          <p class="navbar-dropdown-menu-media-desc">Development guides for building projects with Unify</p>
                                        </div>
                                      </div>
                                    </a>
                                    <!-- End Link -->
    
                                    <div class="dropdown-divider"></div>
    
                                    <!-- Link -->
                                    <a class="navbar-dropdown-menu-media-link" href="../snippets/index"gt;
                                      <div class="d-flex">
                                        <div class="flex-shrink-0">
                                          <i class="bi-layers fs-2 text-dark"></i>
                                        </div>
    
                                        <div class="flex-grow-1 ms-3">
                                          <span class="navbar-dropdown-menu-media-title">Snippets</span>
                                          <p class="navbar-dropdown-menu-media-desc">Move quickly with copy-to-clipboard feature</p>
                                        </div>
                                      </div>
                                    </a>
                                    <!-- End Link -->
                                  </div>
                                  <!-- End Mega Menu -->
                                </li>
                                <!-- End Docs -->
    
                                <!-- Log in -->
                                <li class="nav-item ms-lg-auto">
                                  <a class="btn btn-ghost-dark me-2 me-lg-0" href="../page-login"gt;Log in</a>
                                  <a class="btn btn-dark d-lg-none" href="../page-signup"gt;Sign up</a>
                                </li>
                                <!-- End Log in -->
    
                                <!-- Sign up -->
                                <li class="nav-item">
                                  <a class="btn btn-dark d-none d-lg-inline-block" href="../page-signup"gt;Sign up</a>
                                </li>
                                <!-- End Sign up -->
                              </ul>
                            </div>
                          </div>
                          <!-- End Collapse -->
                        </nav>
                      </div>
                    </header>
                    <!-- ========== END HEADER ========== -->
                  
                
                  
                    <!-- CSS Implementing Plugins -->
                    <link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
                    <script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
    
                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF MEGA MENU
                        // =======================================================
                        const megaMenu = new HSMegaMenu('.js-mega-menu', {
                          desktop: {
                            position: 'left'
                          }
                        })
    
    
                        // INITIALIZATION OF HEADER
                        // =======================================================
                        new HSHeader('#header').init()
                      })()
                    </script>