Headers - Sections

Header #1

Preview
HTML

<header class="header header-sticky header-light">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
      <a href="index.html" class="navbar-brand mr-8"><img src="assets/images/logo-black.svg" alt="Logo"></a>

      <button class="navbar-toggler burger" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown dropdown-hover">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Landings
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown-1">
              <a class="dropdown-item active" href="startup.html">Startup</a>
              <a class="dropdown-item" href="saas.html">Saas</a>
              <a class="dropdown-item" href="coworking.html">Coworking</a>
              <a class="dropdown-item" href="job-listing.html">Job Listing</a>
              <a class="dropdown-item" href="agency.html">Agency</a>
              <a class="dropdown-item" href="blog.html">Blog</a>
              <a class="dropdown-item" href="product.html">Product</a>
              <a class="dropdown-item" href="app.html">App</a>
              <a class="dropdown-item" href="index.html">Presentation</a>
              <a class="dropdown-item" href="documentation.html">Documentation</a>
            </div>
          </li>
          <li class="nav-item dropdown dropdown-hover">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Pages
            </a>
            <div class="dropdown-menu dropdown-menu-md" aria-labelledby="navbarDropdown-2">
              <div class="row gutter-0">
                <div class="col">
                  <a class="dropdown-item" href="about.html">About</a>
                  <a class="dropdown-item" href="contact.html">Contact</a>
                  <a class="dropdown-item" href="pricing.html">Pricing</a>
                  <a class="dropdown-item" href="career.html">Career</a>
                  <a class="dropdown-item" href="faq.html">FAQ</a>
                </div>
                <div class="col">
                  <a class="dropdown-item" href="terms.html">Terms</a>
                  <a class="dropdown-item" href="services.html">Services</a>
                  <a class="dropdown-item" href="article.html">Article</a>
                  <a class="dropdown-item" href="portfolio.html">Portfolio</a>
                  <a class="dropdown-item" href="404.html">404</a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item dropdown dropdown-hover">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Docs
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown-3">
              <a class="dropdown-item" href="docs/index.html">Get Started</a>
              <a class="dropdown-item" href="docs/c-alerts.html">Components</a>
              <a class="dropdown-item" href="docs/s-applications.html">Sections</a>
            </div>
          </li>
        </ul>
        <a href="" class="btn btn-sm btn-rounded btn-with-icon btn-outline-black ml-auto">Buy now <i class="icon-arrow-up-right"></i></a>
      </div>
    </nav>
  </div>
</header>

Header #2

Preview
HTML

<header class="header header-sticky header-dark">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a href="index.html" class="navbar-brand mr-8"><img src="assets/images/logo.svg" alt="Logo"></a>

      <button class="navbar-toggler burger" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown dropdown-hover">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Landings
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown-1">
              <a class="dropdown-item active" href="startup.html">Startup</a>
              <a class="dropdown-item" href="saas.html">Saas</a>
              <a class="dropdown-item" href="coworking.html">Coworking</a>
              <a class="dropdown-item" href="job-listing.html">Job Listing</a>
              <a class="dropdown-item" href="agency.html">Agency</a>
              <a class="dropdown-item" href="blog.html">Blog</a>
              <a class="dropdown-item" href="product.html">Product</a>
              <a class="dropdown-item" href="app.html">App</a>
              <a class="dropdown-item" href="index.html">Presentation</a>
              <a class="dropdown-item" href="documentation.html">Documentation</a>
            </div>
          </li>
          <li class="nav-item dropdown dropdown-hover">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Pages
            </a>
            <div class="dropdown-menu dropdown-menu-md" aria-labelledby="navbarDropdown-2">
              <div class="row gutter-0">
                <div class="col">
                  <a class="dropdown-item" href="about.html">About</a>
                  <a class="dropdown-item" href="contact.html">Contact</a>
                  <a class="dropdown-item" href="pricing.html">Pricing</a>
                  <a class="dropdown-item" href="career.html">Career</a>
                  <a class="dropdown-item" href="faq.html">FAQ</a>
                </div>
                <div class="col">
                  <a class="dropdown-item" href="terms.html">Terms</a>
                  <a class="dropdown-item" href="services.html">Services</a>
                  <a class="dropdown-item" href="article.html">Article</a>
                  <a class="dropdown-item" href="portfolio.html">Portfolio</a>
                  <a class="dropdown-item" href="404.html">404</a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item dropdown dropdown-hover">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Docs
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown-3">
              <a class="dropdown-item" href="docs/index.html">Get Started</a>
              <a class="dropdown-item" href="docs/c-alerts.html">Components</a>
              <a class="dropdown-item" href="docs/s-applications.html">Sections</a>
            </div>
          </li>
        </ul>
        <a href="" class="btn btn-sm btn-rounded btn-with-icon btn-outline-white ml-auto">Buy now <i class="icon-arrow-up-right"></i></a>
      </div>
    </nav>
  </div>
</header>

Header #3

Preview
HTML

<!-- header -->
<header class="header header-sticky header-light">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
      <a href="index.html" class="navbar-brand"><img src="assets/images/logo-black.svg" alt="Logo"></a>
      <button class="overlay-toggler burger btn text-black btn-ico ml-auto mr-0" type="button">
        <span></span>
      </button>
    </nav>
  </div>
</header>

<!-- sidebar -->
<aside class="overlay">
  <button class="overlay-toggler burger text-black" type="button">
    <span></span>
  </button>
  <div class="overlay-body">
    <div>
      <span class="eyebrow mb-2 text-muted d-flex">Menu</span>
      <ul id="page-nav" class="nav flex-column nav-minimal nav-minimal-lg">
        <li class="nav-item active">
          <a class="nav-link" data-toggle="collapse" href="#menu-1" role="button" aria-expanded="false" aria-controls="menu-1">Landings</a>
          <div class="collapse" id="menu-1" data-parent="#page-nav">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link" href="startup.html">Startup</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="saas.html">Saas</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="coworking.html">Coworking</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="job-listing.html">Job Listing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" href="agency.html">Agency</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="blog.html">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="product.html">Product</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="app.html">App</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html">Presentation</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="documentation.html">Documentation</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#menu-2" role="button" aria-expanded="false" aria-controls="menu-2">Pages</a>
          <div class="collapse" id="menu-2" data-parent="#page-nav">
            <div>
              <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact.html">Contact</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="pricing.html">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="career.html">Career</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="faq.html">FAQ</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="terms.html">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="services.html">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="article.html">Article</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="portfolio.html">Portfolio</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="404.html">404</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#menu-3" role="button" aria-expanded="false" aria-controls="menu-3">Docs</a>
          <div class="collapse" id="menu-3" data-parent="#page-nav">
            <div>
              <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link" href="docs/index.html">Get Started</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="docs/c-alerts.html">Components</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="docs/s-applications.html">Sections</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="overlay-footer">
    <ul class="nav nav-minimal text-muted">
      <li class="nav-item">
        <a class="nav-link text-hover-facebook" href="#"><i class="icon-facebook-2 fs-20"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-hover-twitter" href="#"><i class="icon-twitter-2 fs-20"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-hover-linkedin" href="#"><i class="icon-linkedin-2 fs-20"></i></a>
      </li>
    </ul>
  </div>

</aside>

Header #4

Preview
HTML

<header class="header header-sticky header-dark">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a href="index.html" class="navbar-brand"><img src="assets/images/logo.svg" alt="Logo"></a>
      <button class="overlay-toggler burger btn text-white btn-ico ml-auto mr-0" type="button">
        <span></span>
      </button>
    </nav>
  </div>
</header>

<!-- sidebar -->
<aside class="overlay">
  <button class="overlay-toggler burger text-black" type="button">
    <span></span>
  </button>
  <div class="overlay-body">
    <div>
      <span class="eyebrow mb-2 text-muted d-flex">Menu</span>
      <ul id="page-nav" class="nav flex-column nav-minimal nav-minimal-lg">
        <li class="nav-item active">
          <a class="nav-link" data-toggle="collapse" href="#menu-1" role="button" aria-expanded="false" aria-controls="menu-1">Landings</a>
          <div class="collapse" id="menu-1" data-parent="#page-nav">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link" href="startup.html">Startup</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="saas.html">Saas</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="coworking.html">Coworking</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="job-listing.html">Job Listing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" href="agency.html">Agency</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="blog.html">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="product.html">Product</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="app.html">App</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html">Presentation</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="documentation.html">Documentation</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#menu-2" role="button" aria-expanded="false" aria-controls="menu-2">Pages</a>
          <div class="collapse" id="menu-2" data-parent="#page-nav">
            <div>
              <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact.html">Contact</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="pricing.html">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="career.html">Career</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="faq.html">FAQ</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="terms.html">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="services.html">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="article.html">Article</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="portfolio.html">Portfolio</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="404.html">404</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#menu-3" role="button" aria-expanded="false" aria-controls="menu-3">Docs</a>
          <div class="collapse" id="menu-3" data-parent="#page-nav">
            <div>
              <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link" href="docs/index.html">Get Started</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="docs/c-alerts.html">Components</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="docs/s-applications.html">Sections</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="overlay-footer">
    <ul class="nav nav-minimal text-muted">
      <li class="nav-item">
        <a class="nav-link text-hover-facebook" href="#"><i class="icon-facebook-2 fs-20"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-hover-twitter" href="#"><i class="icon-twitter-2 fs-20"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-hover-linkedin" href="#"><i class="icon-linkedin-2 fs-20"></i></a>
      </li>
    </ul>
  </div>

</aside>