Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Back to Header Options
Preview Source Code
Download
HTML
CSS 
/**Typeo CSS Start**/
		@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
		* {
		box-sizing: border-box;
		}
		body {
		font-family: "Poppins", sans-serif;
		color: #444;
		box-sizing: border-box;
		margin: 0px;
		}
		ul, li, a {
		list-style: none;
		text-decoration: none;
		margin: 0px;
		padding: 0px;
		}
		img {
			max-width: 100%;
		}
		.container {
		max-width: 1280px;
		width: 100%;
		padding: 0px 15px;
		margin: auto;
		}
		.container-fluid {
		width: 100%;
		padding: 0px 30px;
		}
		/**Typeo CSS End**/
/**Header Start**/
/**Header Top Section Start**/
.hdr-top-scn {
 width: 100%;
 border-bottom: #e7e7e7 1px solid;
 transition: 0.5s all;
 background-color: #f5f5f5;
}


.hdr-top-inner {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;
 width: 100%;
}

.contactinfo {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
}

.contactinfo a {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 color: #000;
 opacity: 0.8;
 font-size: 15px;
 padding: 5px 0px 5px 15px;
 transition: 0.5s all;
}

.contactinfo a i {
 margin-right: 5px;
 position: relative;
 top: 3px;
}

.contactinfo a:first-child {
 padding-left: 0;
 border-right: #ccc 1px solid;
 padding-right: 15px;
}

.contactinfo a:hover {
 opacity: 1;
}

.socialmedial {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
}

.socialmedial a {
 border-right: #ccc 1px solid;
 padding: 0px 8px;
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: center;
 min-height: 36px;
 opacity: 0.7;
 transition: 0.5s all;
}

.socialmedial a:first-child {
 border-left: #ccc 1px solid;
}

.socialmedial a:hover {
 opacity: 1;
}

/**Header Top Section End**/

.hdr-logonav-scn {
    width: 100%;
    border-bottom: #e7e7e7 1px solid;
    position: relative;
    background-color: #000;
    color: #fff;
}

.header-inner {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    position: relative;
}

.mobile-toggle {
		width: 40px;
		height: 30px;
		position: relative;
		display: flex;
		flex-flow: row wrap;
		cursor: pointer;
		align-items: center;
		}

	.mobile-toggle i {
		width: 100%;
		height: 3px;
		background-color: #fff;
		transition: 0.5s all;
		-webkit-transition: 0.5s all;
		position: relative;
	}
	.menu-search {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.menu-search img, .hdr-cart img, .hdr-user img {
    filter: brightness(0) invert(1);
} 
.hdrsearch-part form .search-btn:hover img {
  filter: brightness(0) invert(1);  
}
.menu-search .hdr-search {
    margin-left: 26px;
    border: none;
    padding: 0px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    top: 2px;
}
.menu-search .hdr-search svg {
	transition: 0.2s all;
}
.menu-search .hdr-search:before {
    content: '';
    width: 34px;
    background-color: #fff;
    height: 3px;
    position: absolute;
    transform: rotate(45deg);
    top: 14px;
    left:0px;
    transition: 0.3s all;
    opacity: 0;
}

.menu-search .hdr-search:after {
    content: '';
    width: 34px;
    background-color: #fff;
    height: 3px;
    position: absolute;
    transform: rotate(-45deg);
    top: 14px;
    left:0px;
    transition: 0.3s all;
    opacity: 0;
}
.search-open .menu-search .hdr-search svg {
	opacity: 0;
}
.search-open .menu-search .hdr-search:before, .search-open .menu-search .hdr-search:after{
	opacity: 1
}
/**Search**/
.hdrsearch-part {
 justify-content: center;
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 	display: none;
		position: absolute;
		top: 100%;
		width: 100%;
		left: 0px;
		z-index: 99;
}

.hdrsearch-part form {
 width: 100%;
 border: #ccc 1px solid;
 position: relative;
 display: flex;
 flex-flow: row wrap;
 background-color: #fff;
}

.hdrsearch-part form input {
 width: calc(100% - 70px);
 border: none;
 outline: none;
 height: 56px;
 font-size: 18px;
 padding: 0px 20px;
 font-family: "Poppins", sans-serif;
}

.hdrsearch-part form .search-btn {
 width: 70px;
 height: 56px;
 border: none;
 outline: none;
 background-color: transparent;
 cursor: pointer;
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 padding: 0px;
 justify-content: center;
 border-left: #ccc 1px solid;
 transition: 0.5s all;
}

.hdrsearch-part form .search-btn:hover {
 background-color: #000;
}

.hdrsearch-part form .search-btn:hover svg path {
 fill: #fff;
}	
	.search-open .hdrsearch-part {
		display: block;
	}

/*Navigation Start*/
.navigation {width: calc(50% - 120px);}
.navigation ul {
    display: flex;
    flex-flow: row wrap;
}

.navigation ul li>a {
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    position: relative;
    transition: 0.5s all;
}

.logo {
    width: 220px;
    margin: auto;
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
}
.logo img{
 display:block;
max-width:230px;
}

.hdricons-part {
    width: calc(50% - 120px);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
}

.hdricons-part a, .hdricons-part button {
    margin: 0px 10px;
    position: relative;
    top: 3px;
}
.countno {
    position: absolute;
    right: -4px;
    top: -4px;
    text-align: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    border-radius: 100%;
    color: #000;
    background-color: #ffffff;
    line-height: 18px;
    z-index: 1;
}
.hdricons-part .hdr-search {
    padding: 0px;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.navigation ul li:hover>a, .navigation ul li.active>a {
    border-color: #000;
}

/*Sub Menu start*/
.navigation ul li.drowpdown {
 position: relative;
}
.navigation ul li.drowpdown:after, 
.navigation ul li.megamenu:after {
 content: '';
 position: relative;
 width: 8px;
 height: 8px;
 border-left: #000 1px solid;
 border-bottom: #000 1px solid;
 vertical-align: middle;
 transform: rotate(-45deg);
 top: -3px;
 margin-left: 5px;
 cursor: pointer;
 display: inline-block;
}
.submenu {
 position: absolute;
 left: 0px;
 top: 150%;
 width: 100%;
 border-top: #e7e7e7 1px solid;
 background-color: #fff;
 box-shadow: #e3e3e3 0px 6px 6px;
 transition: 0.5s all;
 pointer-events: none;
 opacity: 0;
}

.navigation .submenu-imginfo {
	display: block;
	width: 100%;
}
.navigation .submenu-imginfo a {
 font-size: 20px;
 color: #fff;
 font-weight: 600;
 text-align: center;
 width: 100%;
 padding: 10px 15px;
 background-color: #000;
 opacity: 1;
 letter-spacing: 2px;
 display: inline-block;
 text-transform: uppercase;
}

.submenu-img img {
 display: block;
}

/*Sub Menu end*/
.navigation-inner {
    width: calc(600px - 60px);
    position: fixed;
    height: 100%;
    background-color: #fff;
    left: -150%;
    top: 0px;
    z-index: 999;
    transition: 0.5s all;
}
.menu-open .navigation-inner {
	left: 0;
}
.navclose {
    display: block;
    position: absolute;
    left: -60px;
    top: 0px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    cursor: pointer;
    z-index: 999;
}
.menu-open .navclose {
	left: 540px;
} 

.navovelay {
    background-color: #000;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    transition: 0.8s all;
    opacity: 0;
    pointer-events: none;
}
.menu-open .navovelay {
	opacity: 0.7;
	pointer-events: auto;
}
.navclose i {
    width: 22px;
    height: 2px;
    background-color: #000;
    display: inline-block;
    transform: rotate(45deg);
    position: relative;
    left: 9px;
    top: 3px;
}

.navclose i+i {
    transform: rotate(-45deg);
    position: relative;
    left: 9px;
    top: -22px;
    width: 23px;
}
.navigation {
 max-height: 100vh;
}
.navigation ul {
    display: block;
    overflow: auto;
    max-height: 100vh;
}
.navigation ul li {
    padding: 0px;
    margin: 0px;
    width: 100%;
    border-top: #e7e7e7 1px solid;
    font-size: 18px;
    cursor: pointer;
}
.navigation ul li:first-child {
	border-top: none;
}
.navigation ul li a {
    width: 100%;
    display: inline-block;
}

.navigation ul li a {
    padding: 12px 16px;
    border-bottom: none;
    opacity: 0.8;
}
.navigation ul li a:hover {
		opacity: 1;
}
.navigation ul li.drowpdown>a, .navigation ul li.megamenu>a {
    width: calc(100% - 46px);
    border-right: #e7e7e7 1px solid;
}
.navigation ul li.drowpdown:after, .navigation ul li.megamenu:after {
	margin-left: 16px;
}

.navigation ul li.drowpdown:after, .navigation ul li.megamenu:after {
    position: absolute;
    right: 16px;
    top: 16px;
    transition: 0.5s all;
}
.navigation ul li.subnav-open:after {
    transform: rotate(135deg);
    top: 23px;
}
.navigation ul li.drowpdown .submenu {
    width: 100%;
}

.navigation ul li.drowpdown, .navigation ul li.megamenu {
    position: relative;
}
.navigation ul li .submenu-inner {
	margin: 0px;
}
.navigation ul li .submenu-inner ul li {
	border-bottom: none;
}
.submenu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    display: none;
}
.subnav-open .submenu {
	display: block;
}
.navigation ul li .submenu-inner {
	display: block;
	padding: 0px;
}
.navigation ul li .submenu-inner ul {
    padding: 0;
}
.navigation ul li ul li {
	border-bottom:none;
}
.navigation ul li ul li a {
	font-size: 16px;
	font-weight: 400;
}
.navigation ul li .submenu-inner ul li a {
    padding-right: 15px;
    padding-left: 15px;
}
/*Navigation End*/
@media (max-width: 1450px) {
.container-fluid {
	padding: 0 15px;
}

.navigation ul li.drowpdown:after, .navigation ul li.megamenu:after {
	margin-left: 1px;
}
}

@media (max-width: 1300px) {
	.navigation ul li {
    font-size: 15px;
}
}
@media (max-width: 1200px) {
	.header-inner {
		padding: 12px 0;
	}
		

	.logo { font-size: 22px; }

/**Navigation **/
.header-scn {
	box-shadow: #e3e3e3 0px 3px 2px;
}

}
@media(max-width: 767px) {
.header-inner .logo {
 margin-top:auto;
}
.logo img{
max-width:140px;
}
.hdr-top-inner {
justify-content: center;
}	
.hdr-top-right {
    display: none;
}	
.header-inner {
	justify-content: flex-start;
}
.navigation-inner {
 width: calc(100% - 60px);
}

.menu-open .navclose {
    left: 100%;
}
.mobile-toggle {
 height: 26px;
 width: 30px;
}
.logo {
    font-size: 20px;
    width: calc(100% - 180px);
}
.menu-search .hdr-search {
	margin-left: 15px;
}
.navigation {
    width: auto;
    margin-right: 8px;
}
.hdricons-part {
	    width: auto;
    margin-left: auto;
}
.hdricons-part a, .hdricons-part button {
	    margin: 0px 5px;
}
.navclose i {
    top: 3px;
}

.navclose i+i {
    top: -22px;
 
}
}
/**Header End**/
JS 
/*Mobile Menu Show Hide Start*/
function navigation() {
	document.querySelector('html').classList.add('menu-open');
}
function removeNav() {
	document.querySelector('html').classList.remove('menu-open');
}
document.querySelector('#mobiletoggle').addEventListener('click', navigation);
document.querySelector('.navclose').addEventListener('click', removeNav);
/*Mobile Menu Show Hide End*/
/*Dropdown Menu Start*/
let navitems = document.querySelectorAll(".navigation ul>li");
navitems.forEach(function (t) {
	t.addEventListener("click", function (e) {
		navitems.forEach(function (e) {
			e !== t || e.classList.contains("subnav-open")
				? e.classList.remove("subnav-open")
				: e.classList.add("subnav-open");
		});
	});
});
/*Dropdown Menu End*/	
/**Mobile Search bar start**/
function searchBar() {
document.querySelector('html').classList.toggle('search-open');
}
document.querySelector('#searchbar').addEventListener('click', searchBar);	
/**Mobile Search bar end**/

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *