HTML & CSS Header Components
(Mostly)Ready to use header components. Copy and paste these HTML & CSS components and build your awesome website. Use this to kickstart your component and customize to meet your needs.
Header Right
<header class="header">
<div class="header__wrapper wrapper-lg">
<div class="header__logo">
<span class="visually-hidden">Home</span>
<a class="brand-logo" href="/">
<img src="/uploads/Insight-Logo-White.png" width="164" height="141" alt="">
</a>
</div>
<nav class="header__nav" aria-label="primary navigation">
<ul class="header__nav-list">
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/services/" aria-label="Services">
Services
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/about/" aria-label="About">
About
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/contact/" aria-label="Contact">
Contact
</a>
</li>
</ul>
</nav>
<div id="header__mobile-nav" class="header__mobile-nav">
<div class="header__mobile-nav-inner">
<ul class="header__mobile-nav-menu">
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/about/" aria-label="About" title="About">About</a>
</li>
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/contact/" aria-label="Contact" title="Contact">Contact</a>
</li>
</ul>
</div>
</div>
<button class="header__hamburger hamburger hamburger--slider" type="button" aria-controls="header__mobile-nav" aria-label="close mobile menu" aria-expanded="true">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</header>
<script>
const siteHeader = document.querySelector(".header")
const mobileMenu = document.querySelector('.header__mobile-nav');
const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', toggleMobileMenu);
function toggleMobileMenu() {
if (mobileMenu.classList.contains('nav-open')) {
this.setAttribute('aria-expanded', 'false');
this.setAttribute('aria-label', 'open mobile menu');
mobileMenu.classList.remove('nav-open');
hamburger.classList.remove('is-active');
} else {
mobileMenu.classList.add('nav-open');
hamburger.classList.add('is-active');
this.setAttribute('aria-expanded', 'true');
this.setAttribute('aria-label', 'close mobile menu');
}
}
</script>
.header {
width: 100%;
// position: fixed;
position: relative;
top: 0;
left: 0;
z-index: 9;
transition: $transition;
background-color: $white;
box-shadow: 0 4px 8px rgba(0,0,0,.15);
padding: .5rem 0;
}
.header__wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@include breakpoint(lg) {
overflow: visible;
}
}
.header__logo {
max-width: clamp(150px, 20vw, 200px);
}
.header__mobile-nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
overflow: hidden;
transition: $transition;
background-color: $white;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-in-out;
@include breakpoint(md) {
display: none;
}
}
.header__mobile-nav.nav-open {
max-height: 1000px;
}
.header__mobile-nav-item {
position: relative;
list-style-type: none;
}
.header__mobile-nav-link {
text-decoration: none;
padding: $ic-100 0;
display: block;
width: 100%;
transition: color $transition;
font-family: $secondary-font;
font-size: $ic-200;
border-bottom: 1px solid #f6f6f6;
color: $black;
&:hover,
&:focus {
color: $secondary-color;
}
}
.header__mobile-nav-menu {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem;
}
.header__nav {
display: none;
@include breakpoint(md) {
display: flex;
}
}
.header__nav-list {
display: none;
@include breakpoint(md) {
display: flex;
padding: 0;
margin: 0;
}
}
.header__nav-list-item {
position: relative;
@include breakpoint(md) {
list-style-type: none;
margin-top: 0;
padding: $ic-100 $ic-200;
display: inline-block;
}
}
.header__nav-list-link {
position: relative;
text-decoration: none;
font-family: $secondary-font;
font-size: $ic-200;
padding: .8rem 0;
transition: $transition;
color: $black;
&::after {
background: $secondary-color;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: top right;
position: absolute;
bottom: 0;
left: 0;
content: "";
transition: transform $transition;
}
@include breakpoint(md) {
&:hover,
&:focus {
color: $primary-color;
&::after {
transform: scaleX(1);
transform-origin: top left;
}
}
}
}
.header__nav-list-item:last-of-type {
padding-right: 0;
}
.nav-open {
transform: translateX(0);
opacity: 1;
overflow: hidden;
visibility: visible;
}
Copied to clipboard!
Header Centered
<header class="header header--centered">
<div class="header__wrapper wrapper-lg">
<div class="header__logo">
<span class="visually-hidden">Home</span>
<a class="brand-logo" href="/">
<img src="/uploads/Insight-Logo-White.png" width="164" height="141" alt="">
</a>
</div>
<div class="header__middle">
<nav class="header__nav" aria-label="primary navigation">
<ul class="header__nav-list">
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/services/" aria-label="Services">
Services
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/about/" aria-label="About">
About
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/contact/" aria-label="Contact">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div class="header__end">
<a class="btn btn--primary" href="#">Let's Talk</a>
</div>
<div id="header__mobile-nav" class="header__mobile-nav">
<div class="header__mobile-nav-inner">
<ul class="header__mobile-nav-menu">
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/about/" aria-label="About" title="About">About</a>
</li>
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/contact/" aria-label="Contact" title="Contact">Contact</a>
</li>
</ul>
</div>
</div>
<button class="header__hamburger hamburger hamburger--slider" type="button" aria-controls="header__mobile-nav" aria-label="close mobile menu" aria-expanded="true">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</header>
<script>
const siteHeader = document.querySelector(".header")
const mobileMenu = document.querySelector('.header__mobile-nav');
const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', toggleMobileMenu);
function toggleMobileMenu() {
if (mobileMenu.classList.contains('nav-open')) {
this.setAttribute('aria-expanded', 'false');
this.setAttribute('aria-label', 'open mobile menu');
mobileMenu.classList.remove('nav-open');
hamburger.classList.remove('is-active');
} else {
mobileMenu.classList.add('nav-open');
hamburger.classList.add('is-active');
this.setAttribute('aria-expanded', 'true');
this.setAttribute('aria-label', 'close mobile menu');
}
}
</script>
.header {
width: 100%;
// position: fixed;
position: relative;
top: 0;
left: 0;
z-index: 9;
transition: $transition;
background-color: $white;
box-shadow: 0 4px 8px rgba(0,0,0,.15);
padding: .5rem 0;
}
.header__wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@include breakpoint(lg) {
overflow: visible;
}
}
.header__logo {
max-width: clamp(150px, 20vw, 200px);
}
.header__mobile-nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
overflow: hidden;
transition: $transition;
background-color: $white;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-in-out;
@include breakpoint(md) {
display: none;
}
}
.header__mobile-nav.nav-open {
max-height: 1000px;
}
.header__mobile-nav-item {
position: relative;
list-style-type: none;
}
.header__mobile-nav-link {
text-decoration: none;
padding: $ic-100 0;
display: block;
width: 100%;
transition: color $transition;
font-family: $secondary-font;
font-size: $ic-200;
border-bottom: 1px solid #f6f6f6;
color: $black;
&:hover,
&:focus {
color: $secondary-color;
}
}
.header__mobile-nav-menu {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem;
}
.header__nav-list {
display: none;
@include breakpoint(md) {
display: flex;
padding: 0;
margin: 0;
}
}
.header__nav-list-item {
position: relative;
@include breakpoint(md) {
list-style-type: none;
margin-top: 0;
padding: $ic-100 $ic-200;
display: inline-block;
}
}
.header__nav-list-link {
position: relative;
text-decoration: none;
font-family: $secondary-font;
font-size: $ic-200;
padding: $ic--200 0;
transition: $transition;
color: $black;
&::after {
background: $secondary-color;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: top right;
position: absolute;
bottom: 0;
left: 0;
content: "";
transition: transform $transition;
}
@include breakpoint(md) {
&:hover,
&:focus {
color: $primary-color;
&::after {
transform: scaleX(1);
transform-origin: top left;
}
}
}
}
.header__nav-list-item:last-of-type {
padding-right: 0;
}
.nav-open {
transform: translateX(0);
opacity: 1;
overflow: hidden;
visibility: visible;
}
Copied to clipboard!
Header Left
<header class="header header--left">
<div class="header__wrapper wrapper-lg">
<div class="header__logo">
<span class="visually-hidden">Home</span>
<a class="brand-logo" href="/">
<img src="/uploads/Insight-Logo-White.png" width="164" height="141" alt="">
</a>
</div>
<nav class="header__nav" aria-label="primary navigation">
<ul class="header__nav-list">
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/services/" aria-label="Services">
Services
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/about/" aria-label="About">
About
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/contact/" aria-label="Contact">
Contact
</a>
</li>
</ul>
</nav>
<div id="header__mobile-nav" class="header__mobile-nav">
<div class="header__mobile-nav-inner">
<ul class="header__mobile-nav-menu">
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/about/" aria-label="About" title="About">About</a>
</li>
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/contact/" aria-label="Contact" title="Contact">Contact</a>
</li>
</ul>
</div>
</div>
<button class="header__hamburger hamburger hamburger--slider" type="button" aria-controls="header__mobile-nav" aria-label="close mobile menu" aria-expanded="true">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</header>
<script>
const siteHeader = document.querySelector(".header")
const mobileMenu = document.querySelector('.header__mobile-nav');
const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', toggleMobileMenu);
function toggleMobileMenu() {
if (mobileMenu.classList.contains('nav-open')) {
this.setAttribute('aria-expanded', 'false');
this.setAttribute('aria-label', 'open mobile menu');
mobileMenu.classList.remove('nav-open');
hamburger.classList.remove('is-active');
} else {
mobileMenu.classList.add('nav-open');
hamburger.classList.add('is-active');
this.setAttribute('aria-expanded', 'true');
this.setAttribute('aria-label', 'close mobile menu');
}
}
</script>
.header {
width: 100%;
// position: fixed;
position: relative;
top: 0;
left: 0;
z-index: 9;
transition: $transition;
background-color: $white;
box-shadow: 0 4px 8px rgba(0,0,0,.15);
padding: .5rem 0;
}
.header__wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@include breakpoint(lg) {
overflow: visible;
}
}
.header__logo {
max-width: clamp(150px, 20vw, 200px);
}
.header__mobile-nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
overflow: hidden;
transition: $transition;
background-color: $white;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-in-out;
@include breakpoint(md) {
display: none;
}
}
.header__mobile-nav.nav-open {
max-height: 1000px;
}
.header__mobile-nav-item {
position: relative;
list-style-type: none;
}
.header__mobile-nav-link {
text-decoration: none;
padding: $ic-100 0;
display: block;
width: 100%;
transition: color $transition;
font-family: $secondary-font;
font-size: $ic-200;
border-bottom: 1px solid #f6f6f6;
color: $black;
&:hover,
&:focus {
color: $secondary-color;
}
}
.header__mobile-nav-menu {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem;
}
.header--left .header__nav {
display: none;
@include breakpoint(md) {
display: flex;
margin-right: auto;
}
}
.header__nav-list {
display: none;
@include breakpoint(md) {
display: flex;
padding: 0;
margin: 0;
}
}
.header__nav-list-item {
position: relative;
@include breakpoint(md) {
list-style-type: none;
margin-top: 0;
padding: $ic-100 $ic-200;
display: inline-block;
}
}
.header__nav-list-link {
position: relative;
text-decoration: none;
font-family: $secondary-font;
font-size: $ic-200;
padding: $ic--200 0;
transition: .3s ease-out;
color: $black;
&::after {
background: $secondary-color;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: top right;
position: absolute;
bottom: 0;
left: 0;
content: "";
transition: transform 0.4s ease-out;
}
@include breakpoint(md) {
&:hover,
&:focus {
color: $primary-color;
&::after {
transform: scaleX(1);
transform-origin: top left;
}
}
}
}
.header__nav-list-item:last-of-type {
padding-right: 0;
}
.nav-open {
transform: translateX(0);
opacity: 1;
overflow: hidden;
visibility: visible;
}
Copied to clipboard!
Header With Secondary Nav
<header class="header header--with-secondary">
<div class="header__top bg-gray">
<div class="wrapper-lg">
<ul class="header__top-nav">
<li class="header__top-nav-item">
<a class="header__top-nav-link href="#">News</a>
</li>
<li class="header__top-nav-item">
<a class="header__top-nav-link" href="#">Tours</a>
</li>
</ul>
</div>
</div>
<div class="header__wrapper wrapper-lg">
<div class="header__logo">
<span class="visually-hidden">Home</span>
<a class="brand-logo" href="/">
<img src="/uploads/Insight-Logo-White.png" width="164" height="141" alt="">
</a>
</div>
<nav class="header__nav" aria-label="primary navigation">
<ul class="header__nav-list">
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/services/" aria-label="Services">
Services
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/about/" aria-label="About">
About
</a>
</li>
<li class="header__nav-list-item">
<a class="header__nav-list-link" href="/contact/" aria-label="Contact">
Contact
</a>
</li>
</ul>
</nav>
<div id="header__mobile-nav" class="header__mobile-nav">
<div class="header__mobile-nav-inner">
<ul class="header__mobile-nav-menu">
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/about/" aria-label="About" title="About">About</a>
</li>
<li class="header__mobile-nav-item">
<a class="header__mobile-nav-link" href="/contact/" aria-label="Contact" title="Contact">Contact</a>
</li>
</ul>
</div>
</div>
<button class="header__hamburger hamburger hamburger--slider" type="button" aria-controls="header__mobile-nav" aria-label="close mobile menu" aria-expanded="true">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</header>
<script>
const siteHeader = document.querySelector(".header")
const mobileMenu = document.querySelector('.header__mobile-nav');
const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', toggleMobileMenu);
function toggleMobileMenu() {
if (mobileMenu.classList.contains('nav-open')) {
this.setAttribute('aria-expanded', 'false');
this.setAttribute('aria-label', 'open mobile menu');
mobileMenu.classList.remove('nav-open');
hamburger.classList.remove('is-active');
} else {
mobileMenu.classList.add('nav-open');
hamburger.classList.add('is-active');
this.setAttribute('aria-expanded', 'true');
this.setAttribute('aria-label', 'close mobile menu');
}
}
</script>
.header {
width: 100%;
// position: fixed;
position: relative;
top: 0;
left: 0;
z-index: 9;
transition: $transition;
background-color: $white;
box-shadow: 0 4px 8px rgba(0,0,0,.15);
padding: .5rem 0;
}
.header__wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@include breakpoint(lg) {
overflow: visible;
}
}
.header__logo {
max-width: clamp(150px, 20vw, 200px);
}
.header__mobile-nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
overflow: hidden;
transition: $transition;
background-color: $white;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-in-out;
@include breakpoint(md) {
display: none;
}
}
.header__mobile-nav.nav-open {
max-height: 1000px;
}
.header__mobile-nav-item {
position: relative;
list-style-type: none;
}
.header__mobile-nav-link {
text-decoration: none;
padding: $ic-100 0;
display: block;
width: 100%;
transition: color $transition;
font-family: $secondary-font;
font-size: $ic-200;
border-bottom: 1px solid #f6f6f6;
color: $black;
&:hover,
&:focus {
color: $secondary-color;
}
}
.header__mobile-nav-menu {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem;
}
.header__nav {
display: none;
@include breakpoint(md) {
display: flex;
}
}
.header__nav-list {
display: none;
@include breakpoint(md) {
display: flex;
padding: 0;
margin: 0;
}
}
.header__nav-list-item {
position: relative;
@include breakpoint(md) {
list-style-type: none;
margin-top: 0;
padding: 1rem 1.25rem;
display: inline-block;
}
}
.header__nav-list-link {
position: relative;
text-decoration: none;
font-family: $secondary-font;
font-size: $ic-200;
padding: .8rem 0;
transition: $transition;
color: $black;
&::after {
background: $secondary-color;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: top right;
position: absolute;
bottom: 0;
left: 0;
content: "";
transition: transform $transition;
}
@include breakpoint(md) {
&:hover,
&:focus {
color: $primary-color;
&::after {
transform: scaleX(1);
transform-origin: top left;
}
}
}
}
.header__nav-list-item:last-of-type {
padding-right: 0;
}
.nav-open {
transform: translateX(0);
opacity: 1;
overflow: hidden;
visibility: visible;
}
// Start styles for header with secondary navigation
.header--with-secondary {
padding: 0;
}
.header__top {
display: none;
@include breakpoint(md) {
display: flex;
}
}
.header__top-nav {
display: flex;
max-width: fit-content;
margin-left: auto;
margin-top: 0;
margin-bottom: 0;
padding: .3rem 0;
li:last-of-type {
padding: 0 0 0 1rem;
}
}
.header__top-nav-item {
list-style-type: none;
margin-top: 0;
padding: 0 1rem;
}
.header__top-nav-link {
color: $black;
text-decoration: none;
font-size: .8rem;
font-weight: 700;
transition: color $transition;
&:hover,
&:focus {
color: $primary-color;
}
}
.header--with-secondary .header__wrapper {
padding-top: .5rem;
padding-bottom: .5rem;
}
// End styles for header with secondary navigation
Copied to clipboard!