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;
}

.container {
	max-width: 1280px;
	width: 100%;
	padding: 0px 15px;
	margin: auto;
}

.container-fluid {
	width: 100%;
	padding: 0px 30px;
}

img {
	max-width: 100%;
}

/**Typeo CSS End**/

/**Header Top Section Start**/
.header-main {
	width: 100%;
}

.header-scn {
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
}

.hdr-top-scn {
	width: 100%;
	border-bottom: #e7e7e7 1px solid;
	transition: 0.5s all;
}

.fixed .hdr-top-scn {
	margin-top: -42px;
}

.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 Start**/

/**Header Top**/
.logonav-group {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	padding: 24px 0;
	transition: 0.5s all;
}

.fixed .logonav-group {
	padding: 16px 0;
}

.logo {
	font-size: 28px;
	text-transform: uppercase;
	font-weight: 700;
	color: #000;
	max-width: 180px;
}

.hdrsearch-part {
	width: calc(100% - 500px);
	justify-content: center;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.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% - 50px);
	border: none;
	outline: none;
	height: 46px;
	font-size: 16px;
	padding: 0px 14px;
	font-family: "Poppins", sans-serif;
}

.hdrsearch-part form .search-btn {
	width: 50px;
	height: 46px;
	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;
}

.hdricons-part {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-end;
}

.searchmob {
	display: none;
}

.hdricons-part a {
	margin: 0px 10px;
	position: relative;
	top: 6px;
	transition: 0.5s all;
	opacity: 0.8;
	position: relative;
}

.hdricons-part a:hover {
	opacity: 1;
}

.countno {
	position: absolute;
	right: -4px;
	top: -4px;
	text-align: center;
	width: 18px;
	height: 18px;
	font-size: 11px;
	border-radius: 100%;
	color: #fff;
	background-color: #000;
	line-height: 18px;
	z-index: 1;
}

/*Navigation Start*/
.navigation-scn {
	width: 100%;
	position: relative;
	background-color: #000;
}

.navigation ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.navigation ul li.drowpdown:after,
.navigation ul li.megamenu:after {
	content: '';
	position: relative;
	width: 10px;
	height: 10px;
	border-left: #fff 2px solid;
	border-bottom: #fff 2px solid;
	vertical-align: middle;
	transform: rotate(-45deg);
	top: -3px;
	margin-left: 11px;
	cursor: pointer;
}

.navigation ul li {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 0px 24px;
}

.navigation ul li.drowpdown {
	position: relative;
}

.navigation ul li.drowpdown:hover:after,
.navigation ul li.megamenu:hover:after {
	opacity: 0.9;
}

.navigation ul li a {
	padding: 16px 0;
	display: flex;
	flex-flow: row wrap;
	font-size: 18px;
	color: #fff;
	text-transform: uppercase;
	transition: 0.5s all;
}

.navigation ul li:hover a,
.navigation ul li.active a {
	opacity: 0.8;
}

/*Sub Menu start*/
.submenu {
	position: absolute;
	left: 0px;
	top: 150%;
	width: 100%;
	background-color: #fff;
	box-shadow: #e3e3e3 0px 6px 6px;
	transition: 0.5s all;
	pointer-events: none;
	opacity: 0;
}

.navigation ul li:hover .submenu {
	top: 100%;
	opacity: 1;
	pointer-events: auto;
}

.navigation ul li.drowpdown .submenu {
	width: 250px;
}

.navigation ul li ul {
	display: block;
}

.navigation ul li ul li {
	padding: 0px;
	width: 100%;
	border-bottom: #dfdfdf 1px solid;
	display: block;
}

.navigation ul li ul li:last-child {
	border-bottom: none;
}

.navigation ul li ul li a {
	color: #000;
	padding: 8px 15px;
	font-size: 18px;
}

.navigation ul li .submenu-inner {
	display: grid;
	max-width: 1280px;
	margin: auto;
	flex-flow: row wrap;
	width: 100%;
	padding: 20px 0;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.navigation ul li .submenu-inner ul {
	padding: 0px 14px;
}

.navigation ul li .submenu-inner ul li a {
	padding-right: 0px;
	padding-left: 0px;
}

.navigation ul li .submenu-inner .submenu-imginfo a {
	font-size: 20px;
	color: #fff;
	font-weight: 700;
	text-align: center;
	width: 100%;
	padding: 10px 15px;
	background-color: #000;
	opacity: 1;
	justify-content: center;
	letter-spacing: 2px;
}

.submenu-img img {
	display: block;
}

.navigation ul li .submenu-inner .submenu-imginfo {
}

/*Sub Menu start*/

/*Navigation Start*/
@media (max-width:1100px) {
	.navigation ul li {
		padding: 0px 18px;
	}

}

@media (max-width:992px) {
	.logonav-group {
		padding: 18px 0px;
	}

	.hdrsearch-part {
		width: calc(100% - 350px);
	}

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

	.mobile-toggle i {
		width: 100%;
		height: 2px;
		background-color: #000;
		transition: 0.5s all;
		-webkit-transition: 0.5s all;
		position: relative;
	}

	.logo {
		font-size: 22px;
	}

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

	.navigation-scn {
		width: calc(100% - 60px);
		position: fixed;
		height: 100%;
		background-color: #000;
		left: -150%;
		top: 0px;
		z-index: 999;
		transition: 0.5s all;
	}

	.menu-open .navigation-scn {
		left: 0;
	}

	.navclose {
		position: absolute;
		right: -40px;
		top: 0px;
		width: 40px;
		height: 40px;
		background-color: #fff;
		cursor: pointer;
	}

	.navovelay {
		background-color: #000;
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 99;
		transition: 0.5s 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-scn .container {
		padding: 0px;
	}

	.navigation {
		overflow: auto;
		max-height: 100vh;
	}

	.navigation ul li {
		padding: 0px;
		width: 100%;
		border-top: #ccc 1px solid;
	}

	.navigation ul li a {
		width: 100%;
		display: inline-block;
	}

	.navigation ul li a {
		padding: 12px 16px;
	}

	.navigation ul li.drowpdown>a,
	.navigation ul li.megamenu>a {
		width: calc(100% - 46px);
		border-right: #fff 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;
	}

	.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 a {
		font-size: 16px;
	}

	.navigation ul li .submenu-inner ul li a {
		padding-right: 15px;
		padding-left: 15px;
	}

}

@media(max-width:767px) {
	.searchmob {
		display: block;
		position: relative;
		top: 7px;
		margin-right: 5px;
	}

	.hdr-top-inner {
		justify-content: center;
	}

	.hdr-top-right {
		display: none;
	}

	.hdrsearch-part {
		display: none;
		position: absolute;
		top: 100%;
		width: 100%;
		left: 0px;
		z-index: 99;
	}

	.search-open .hdrsearch-part {
		display: block;
	}

}
JS 
/**Header Height added**/
let hdrHeight = document.querySelector('.header-scn').offsetHeight;
document.querySelector('.header-main').style.height = `${hdrHeight}px`;
/**Header Height added**/	
/**On Scroll Fixed**/
		document.addEventListener('scroll', (event) => {
				if(window.scrollY > 10) {
					document.querySelector('html').classList.add('fixed');
				}else {
						document.querySelector('html').classList.remove('fixed');
				}
		})
		onscroll = (event) => {};
/**On Scroll Fixed**/
/*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('.mobile-toggle').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 mobileSearch() {
	document.querySelector('html').classList.toggle('search-open');
}
document.querySelector('.searchmob').addEventListener('click', mobileSearch);	
/**Mobile Search bar end**/

Related Snippets

Leave a comment

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