Section & Variations › Header
Available Variations
Starter Kit Codes
<!-- include sections/header -->
<header class="header header-navbar-only" style="">
<nav class="navbar navbar-variation-1 navbar-center navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="container">
<div class="navbar-container-bg"></div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item"><a href="#Top Deals" class="nav-link">Top Deals</a></li>
<li class="nav-item"><a href="#Package" class="nav-link">Package</a></li>
<li class="nav-item"><a href="#Review" class="nav-link">Review</a></li>
<li class="nav-item"><a href="#Blog" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link">Sign In</a></li>
<li class="nav-item menu-item"><a href="#sign-up" class="btn btn-sm nav-btn">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
</header>
Starter Kit Codes
<!-- include sections/header -->
<header class="header header-homepage-1 " style="background-image: url('assets/images/travel-homepage-header-bg.png')">
<nav class="navbar navbar-transparent navbar-variation-1 navbar-center navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="container">
<div class="navbar-container-bg"></div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item"><a href="#Top Deals" class="nav-link">Top Deals</a></li>
<li class="nav-item"><a href="#Package" class="nav-link">Package</a></li>
<li class="nav-item"><a href="#Review" class="nav-link">Review</a></li>
<li class="nav-item"><a href="#Blog" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link">Sign In</a></li>
<li class="nav-item menu-item"><a href="#sign-up" class="btn btn-sm nav-btn">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="header-container-bg" style="background-image: url('assets/images/travel-homepage-header-bg.png')"></div>
<div class="header-content">
<div class="header-text-button">
<h6 class="header-subtitle">Welcome to Vendora Adventures!</h6>
<h2 class="header-title">Your gateway to unforgettable journeys</h2>
<div class="header-sub-titles">
<div class="header-cta">
<form class="form-booking-header" action="#">
<div class="form-inner">
<div class="input-group input-group-destination"><input type="text" class="form-control" placeholder="Destination"></div>
<div class="input-group input-group-date flex-nowrap"><button class="btn btn-icon" type="button"><i class="ic ic-calendar-blank"></i></button><input type="text" class="form-control" placeholder="Check-in"></div>
<div class="input-group input-group-date flex-nowrap"><button class="btn btn-icon" type="button"><i class="ic ic-calendar-check"></i></button><input type="text" class="form-control" placeholder="Checkout"></div>
<div class="input-group input-group-guest">
<select class="form-select"><option selected="">1 Guest</option><option>2 Guests</option></select>
</div>
</div>
<button class="btn btn-icon btn-submit btn-lg btn-brand-primary" type="button"><i class="ic ic-search white"></i><span class="d-xl-none">Search</span></button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="header-additional-section">
<section class="client client-variation-1">
<div class="container">
<div class="section-content">
<div class="section-images">
<div class="item"><img src="assets/images/client-image-96-1-white.svg" /></div>
<div class="item"><img src="assets/images/client-image-96-2-white.svg" /></div>
<div class="item"><img src="assets/images/client-image-96-3-white.svg" /></div>
<div class="item"><img src="assets/images/client-image-96-4-white.svg" /></div>
<div class="item"><img src="assets/images/client-image-96-5-white.svg" /></div>
<div class="item"><img src="assets/images/client-image-96-6-white.svg" /></div>
</div>
</div>
</div>
</section>
</div>
</header>
Starter Kit Codes
<!-- include sections/header -->
<header class="header header-homepage-2 header-with-promobar " style="background-image: url('assets/images/fashion-homepage-header-bg.png')">
<nav class="navbar navbar-variation-2 navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="navbar-promo-bar">
<div class="container-fluid">
<span>Support (00) 33 169 7720</span>
<strong>Free shipping worldwide. Orders over $200</strong>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Shipping</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQ</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-container-bg"></div>
<div class="navbar-menu-container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item"><a href="#New" class="nav-link">New</a></li>
<li class="nav-item"><a href="#Men" class="nav-link">Men</a></li>
<li class="nav-item"><a href="#Woman" class="nav-link">Woman</a></li>
<li class="nav-item"><a href="#Kids" class="nav-link">Kids</a></li>
<li class="nav-item"><a href="#Collection" class="nav-link">Collection</a></li>
</ul>
<ul class="navbar-nav navbar-right navbar-icons">
<li class="nav-item menu-item"><a href="#search" class="btn nav-link"><i class="ic ic-magnifying-glass dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link"><i class="ic ic-user dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="cart.html" class="btn nav-link"><i class="ic ic-bag dark-1"></i><label class="badge rounded-pill bg-primary">3</label></a></li>
</ul>
</div>
</div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<div class="navbar-menu-container" id="right-navbar">
<ul class="navbar-nav navbar-right navbar-icons">
<li class="nav-item menu-item"><a href="#search" class="btn nav-link"><i class="ic ic-magnifying-glass dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link"><i class="ic ic-user dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="cart.html" class="btn nav-link"><i class="ic ic-bag dark-1"></i><label class="badge rounded-pill bg-primary">3</label></a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="header-container-bg" style="background-image: url('assets/images/fashion-homepage-header-bg.png')"></div>
<div class="header-content">
<div class="header-text-button">
<h6 class="header-subtitle">Summer Sale</h6>
<h2 class="header-title">FW 23/24</h2>
<div class="header-sub-titles">
<div class="header-cta">
<a href="#product-list" class="btn btn-xl btn-icon btn-white">NEW COLLECTION <i class="ic ic-caret-right dark-1"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
Starter Kit Codes
<!-- include sections/header -->
<header class="header header-homepage-3 " style="">
<nav class="navbar navbar-variation-1 navbar-center navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="container">
<div class="navbar-container-bg"></div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item"><a href="#Bestsellers" class="nav-link">Bestsellers</a></li>
<li class="nav-item"><a href="#Skincare" class="nav-link">Skincare</a></li>
<li class="nav-item"><a href="#Makeup" class="nav-link">Makeup</a></li>
<li class="nav-item"><a href="#Suncare" class="nav-link">Suncare</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="navbar-nav navbar-right navbar-icons">
<li class="nav-item menu-item"><a href="#search" class="btn nav-link"><i class="ic ic-magnifying-glass dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link"><i class="ic ic-user dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="cart.html" class="btn nav-link"><i class="ic ic-bag dark-1"></i><label class="badge rounded-pill bg-primary">3</label></a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="header-container-bg" style=""></div>
<div class="header-content">
<div class="header-text-button">
<h2 class="header-title">Radiate confidence with Vendora Glow</h2>
<div class="header-sub-titles">
<div class="header-description">
<p>Discover your true beauty with our luxurious skincare products.</p>
</div>
<div class="header-cta">
<a href="#product-list" class="btn btn-xl btn-icon btn-white">Explore Now <i class="ic ic-caret-right dark-1"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="header-images">
<img src="assets/images/fashion-homepage-header-image-1.png" />
<img src="assets/images/fashion-homepage-header-image-2.png" />
<img src="assets/images/fashion-homepage-header-image-3.png" />
</div>
</header>
Starter Kit Codes
<!-- include sections/header -->
<header class="header header-product-list-1 header-with-breadcrumb" style="">
<nav class="navbar navbar-variation-1 navbar-center navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="container">
<div class="navbar-container-bg"></div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item"><a href="#Top Deals" class="nav-link">Top Deals</a></li>
<li class="nav-item"><a href="#Package" class="nav-link">Package</a></li>
<li class="nav-item"><a href="#Review" class="nav-link">Review</a></li>
<li class="nav-item"><a href="#Blog" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link">Sign In</a></li>
<li class="nav-item menu-item"><a href="#sign-up" class="btn btn-sm nav-btn">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
<nav class="nav-breadcrumb" aria-label="breadcrumb">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item "><a href="#Asia">Asia</a></li>
<li class="breadcrumb-item "><a href="#Indonesia">Indonesia</a></li>
<li class="breadcrumb-item "><a href="#Bali">Bali</a></li>
<li class="breadcrumb-item active"><a href="#Bali Hotels">Bali Hotels</a></li>
</ol>
</div>
</nav>
<div class="container">
<div class="header-container-bg" style=""></div>
<div class="header-content">
<div class="header-text-button">
<h2 class="header-title">Bali Hotels and Places to Stay</h2>
<div class="header-sub-titles">
<div class="header-description">
<p>Enter your dates to get the best place to stay!</p>
</div>
<div class="header-cta">
<form class="form-booking-header" action="#">
<div class="form-inner">
<div class="input-group input-group-destination">
<input type="text" class="form-control" placeholder="Destination">
</div>
<div class="input-group input-group-date flex-nowrap">
<button class="btn btn-icon" type="button"><i class="ic ic-calendar-blank"></i></button>
<input type="text" class="form-control" placeholder="Check-in">
</div>
<div class="input-group input-group-date flex-nowrap">
<button class="btn btn-icon" type="button"><i class="ic ic-calendar-check"></i></button>
<input type="text" class="form-control" placeholder="Checkout">
</div>
<div class="input-group input-group-guest">
<select class="form-select">
<option selected="">1 Guest</option>
<option>2 Guests</option>
</select>
</div>
</div>
<button class="btn btn-icon btn-submit btn-lg btn-brand-primary" type="button">
<i class="ic ic-search white"></i>
<span class="d-xl-none">Search</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</header>
Starter Kit Codes
<!-- include sections/header -->
<header class="header header-product-list-2 header-with-promobar " style="">
<nav class="navbar navbar-variation-2 navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="navbar-promo-bar">
<div class="container-fluid">
<span>Support (00) 33 169 7720</span>
<strong>Free shipping worldwide. Orders over $200</strong>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Shipping</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQ</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-container-bg"></div>
<div class="navbar-menu-container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item"><a href="#New" class="nav-link">New</a></li>
<li class="nav-item"><a href="#Men" class="nav-link">Men</a></li>
<li class="nav-item"><a href="#Woman" class="nav-link">Woman</a></li>
<li class="nav-item"><a href="#Kids" class="nav-link">Kids</a></li>
<li class="nav-item"><a href="#Collection" class="nav-link">Collection</a></li>
</ul>
<ul class="navbar-nav navbar-right navbar-icons">
<li class="nav-item menu-item"><a href="#search" class="btn nav-link"><i class="ic ic-magnifying-glass dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link"><i class="ic ic-user dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="cart.html" class="btn nav-link"><i class="ic ic-bag dark-1"></i><label class="badge rounded-pill bg-primary">3</label></a></li>
</ul>
</div>
</div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<div class="navbar-menu-container" id="right-navbar">
<ul class="navbar-nav navbar-right navbar-icons">
<li class="nav-item menu-item"><a href="#search" class="btn nav-link"><i class="ic ic-magnifying-glass dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link"><i class="ic ic-user dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="cart.html" class="btn nav-link"><i class="ic ic-bag dark-1"></i><label class="badge rounded-pill bg-primary">3</label></a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="header-container-bg" style=""></div>
<div class="header-content">
<div class="header-text-button">
<h2 class="header-title">New Arrivals</h2>
<div class="header-sub-titles">
<div class="header-description">
<p>Beauty is in the details lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique comfort and quality go hand in hand and these materials.</p>
</div>
</div>
</div>
</div>
</div>
</header>
Starter Kit Codes
<!-- include sections/header -->
<header class="header header-product-list-3 " style="">
<nav class="navbar navbar-variation-1 navbar-center navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="container">
<div class="navbar-container-bg"></div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item"><a href="#Bestsellers" class="nav-link">Bestsellers</a></li>
<li class="nav-item"><a href="#Skincare" class="nav-link">Skincare</a></li>
<li class="nav-item"><a href="#Makeup" class="nav-link">Makeup</a></li>
<li class="nav-item"><a href="#Suncare" class="nav-link">Suncare</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="navbar-nav navbar-right navbar-icons">
<li class="nav-item menu-item"><a href="#search" class="btn nav-link"><i class="ic ic-magnifying-glass dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="#sign-in" class="btn nav-link"><i class="ic ic-user dark-1"></i></a></li>
<li class="nav-item menu-item"><a href="cart.html" class="btn nav-link"><i class="ic ic-bag dark-1"></i><label class="badge rounded-pill bg-primary">3</label></a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="header-container-bg" style=""></div>
<div class="header-content">
<div class="header-text-button">
<h2 class="header-title">All Skincare</h2>
<div class="header-sub-titles">
<div class="header-description">
<p>Transformative cleansers, serums, and moisturizers address needs
for all skin types with cutting-edge science and time-tested ingredients.</p>
</div>
<div class="header-cta">
<div class="dropdown">
<button class="btn btn-lg btn-outline-dark-3 dropdown-toggle btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>Filter</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">All</a></li>
<li><a class="dropdown-item" href="#">Category</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>