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

/**Theme Color Code:#FF4820 **/

/**Header Option**/

/**Header Top Section Start**/
.hdr-top-scn {
	width: 100%;
	position: relative;
	background-color: #000;
	color: #fff;
}

.hdr-top-inner {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
}

.hdr-top-inner a {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	color: #fff;
	text-transform: capitalize;
}

.hdr-top-inner a img {
	max-width: 26px;
	margin-right: 10px;
	filter: brightness(0) invert(1);
}

/**Header Top Section Start**/
.header-scn {
	position: relative;
	width: 100%;
	border-bottom: #ccc 1px solid;
	background-color: #fff;
}

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

.hdr-inner .logo {
	margin: 0px;
	font-size: 0px;
	line-height: 1;
	max-width: 220px;
}

.hdr-inner .logo a {
	color: #000;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 700;
}

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

.menu ul li {
	margin: 0px 20px;
}

.menu ul li a {
	font-size: 16px;
	font-weight: 400;
	color: #040C18;
	transition: 0.5s all;
	padding: 10px 0px;
	display: inline-block;
	text-transform: uppercase;
}

.menu ul li a:hover,
.menu ul li.active a {
	color: #FF4820;
}

.menu ul li:last-child {
	margin-right: 0px;
}

.menu ul li.menu-btn a {
	background: #FF4820;
	border-radius: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	padding: 14px 28px;
	display: inline-block;
}

.menu ul li.menu-btn a:hover {
	background-color: #000000;
}

/**Dropdown Menu start**/
.menu ul li.dropdown:after {
	content: '';
	width: 8px;
	height: 8px;
	border-left: #000 2px solid;
	border-bottom: #000 2px solid;
	display: inline-block;
	margin-left: 4px;
	transform: rotate(-45deg);
	position: relative;
	top: -2px;
	cursor: pointer;
}

.menu ul li.dropdown:hover:after {
	border-color: #ff4820;
}

.menu ul li.dropdown:hover>a {
	color: #ff4820;
}

.menu ul li ul {
	position: absolute;
	left: 0px;
	width: 240px;
	background-color: #fff;
	top: 130%;
	box-shadow: #ccc 0px 6px 6px;
	transition: 0.5s all;
	opacity: 0;
	pointer-events: none;
	z-index: 99;
}

.menu ul li.dropdown {
	position: relative;
}

.menu ul li ul li {
	width: 100%;
	border-top: #e9e9e9 1px solid;
	margin: 0px;
}

.menu ul li ul li a {
	padding: 7px 15px;
	display: inline-block;
	width: 100%;
	font-weight: 400;
	font-size: 14px;
}

.menu ul li ul li:first-child {
	border-top: none;
}

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

/**Dropdown Menu end**/
.hdr-right {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.letstalk-btn {
	padding: 9px 30px;
	background-color: #FF4820;
	font-size: 20px;
	color: #fff;
	border-radius: 4px;
	margin-left: 25px;
	font-weight: 600;
}

.social-media {
	display: flex;
	flex-flow: row wrap;
}

.social-media li {
	margin: 0px 5px;
}

.social-media li:first-child {
	margin-left: 0px;
}

.social-media li a {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background-color: #4AB3E0;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}

.social-media li a img {
	max-width: 22px;
	filter: brightness(0) invert(1);
}

.social-media li a:hover img {
	opacity: 0.8;
}

@media (max-width:1240px) {
	.menu ul li {
		margin: 0px 10px;
	}

	.hdr-inner .logo {
		max-width: 170px;
	}

}

@media (max-width:1100px) {
	.container-fluid {
		padding: 0 15px;
	}

	.icons-group .icon {
		margin: 0px 2px;
	}

	.announcement .announce-item,
	.announcement .announce-item a {
		line-height: 1;
		font-size: 12px;
	}

	.letstalk-btn {
		margin-left: 15px;
		margin-right: 15px;
	}

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

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

	.menu-open .mobile-toggle i:nth-child(2) {
		opacity: 0;
	}

	.menu-open .mobile-toggle i:nth-child(1) {
		transform: rotate(-45deg);
		top: 7px;
	}

	.menu-open .mobile-toggle i:nth-child(3) {
		transform: rotate(45deg);
		top: -9px;
	}

	.hdr-inner .logo {
		max-width: 160px;
	}

	.menu ul li {
		margin: 0px 14px;
	}

	.menu ul {
		position: absolute;
		left: -100%;
		top: 100%;
		width: 100%;
		background-color: #fff;
		transition: 0.5s all;
		z-index: 9999;
	}

	.menu-open	.menu ul {
		left: 0px;
	}

	.menu ul li {
		margin: 0px;
		border-top: #ccc 1px solid;
		display: inline-block;
		width: 100%;
	}

	.menu ul li:hover a {
		color: #040C18;
	}

	.menu ul li a {
		padding: 8px 15px;
		width: 100%;
		display: block;
	}

	.menu ul li.menu-btn a {
		border-radius: 0px;
	}

	/**Dropdown Menu start**/
	.menu ul li ul {
		position: static;
		opacity: 1;
		width: 100%;
		pointer-events: auto;
		box-shadow: none;
		border-top: #e9e9e9 1px solid;
		display: none;
	}

	.menu ul li.dropdown a {
		width: calc(100% - 50px);
	}

	.menu ul li.dropdown:before {
		content: '';
		position: absolute;
		right: 12px;
		top: 20px;
		background-color: #000;
		width: 16px;
		height: 2px;
	}

	.menu ul li.dropdown:after {
		content: '';
		position: absolute;
		right: 19px;
		top: 13px;
		background-color: #000;
		width: 2px;
		height: 17px;
		border: none;
		transform: initial;
		transition: 0.5s all;
	}

	.menu ul li.subnav-open:after {
		opacity: 0;
	}

	.menu ul li.subnav-open ul {
		display: block;
	}

	/**Dropdown Menu end**/
}

@media (max-width:767px) {
	.hdr-top-inner a img {
		margin-right: 5px;
	}

	.social-media {
		display: none;
	}

	.letstalk-btn {
		margin-left: 10px;
		margin-right: 10px;
		font-size: 14px;
		padding: 8px 14px;
	}

}
JS 
/*Mobile Menu Show Hide Start*/
function navigation() {
document.querySelector('html').classList.toggle('menu-open');
}
document.querySelector('.mobile-toggle').addEventListener('click', navigation);
/*Mobile Menu Show Hide End*/
/*Dropdown Menu Start*/
 let navitems = document.querySelectorAll(".menu 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*/

Related Snippets

Leave a comment

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