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


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

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

/*Navigation Start*/
.navigation {
 width: calc(50% - 80px);
}

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

.navigation ul li {
 font-size: 16px;
 margin: 0px 14px;
}

.navigation ul li>a {
 text-transform: uppercase;
 color: #000;
 font-weight: 600;
 position: relative;
 display: inline-block;
 padding: 24px 0 22px 0;
 border-bottom: 2px solid transparent;
 transition: 0.5s all;
}

.logo {
 width: 160px;
 text-align: center;
 font-size: 23px;
 font-weight: 700;
 color: #000;
 text-transform: uppercase;
}

.hdricons-part {
 width: calc(50% - 80px);
 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;
}

.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 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 {
 margin: 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: 16px;
 border-bottom: none;
 font-weight: normal;
 opacity: 0.8;
}

.navigation ul li ul li a:hover {
 opacity: 1;
}

.navigation ul li .submenu-inner {
 display: grid;
 max-width: 1280px;
 margin: auto 2%;
 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 .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 End*/
@media (max-width:1450px) {
 .container-fluid {
  padding: 0 15px;
 }

 .navigation ul li {
  font-size: 15px;
  margin: 0px 10px;
 }

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

}

@media (max-width:1300px) {
 .navigation ul li {
  font-size: 15px;
  margin: 0px 6px;
 }

}

@media (max-width:1200px) {
 .header-inner {
  padding: 14px 0;
 }

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

 .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-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.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 {
  overflow: auto;
  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;
 }

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

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

}

@media(max-width:767px) {
 .header-inner {
  justify-content: flex-start;
 }

 .navigation-inner {
  width: calc(100% - 60px);
 }

 .menu-open .navclose {
  left: 100%;
 }

 .logo {
  font-size: 20px;
  width: 140px;
  margin-left: 5px;
 }

 .navigation {
  width: auto;
 }

 .hdricons-part {
  width: auto;
  margin-left: auto;
 }

 .hdricons-part a,
 .hdricons-part button {
  margin: 0px 6px;
 }

}

/**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('.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*/

Related Snippets

Leave a comment

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