File: /var/www/html/CW-techs/wp-content/themes/cw-techs/scss/header.scss
@import 'partials';
.top-section{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #000;
padding: 23px 0px;
border: 1px solid #1E1E21;
@media($sm-991){
display: none;
}
.top-sec-inner{
display: flex;
justify-content: space-between;
align-items: center;
@media(max-width:415px){
flex-direction: column;
}
}
.social-icons{
display: flex;
align-items: center;
.ico{
width: 33px;
height: 33px;
margin: 0px 10px;
@media($sm-1679){
width: 28px;
height: 28px;
margin: 0px 8px;
}
@media($sm-1441){
width: 26px;
height: 26px;
margin: 0px 6px;
}
@media($sm-1199){
width: 24px;
height: 24px;
margin: 0px 4px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50px;
}
&:first-child{
margin-left: 0px;
}
&:last-child{
margin-right: 0px;
}
}
}
.contact-info , .nmbr{
font-family:$primary-font;
font-weight: 400;
font-size: 14px;
line-height: 28px;
letter-spacing: 0%;
vertical-align: middle;
text-decoration: none;
color: $white;
@media($sm-1679){
font-size: 12px;
}
}
.search-bar{
flex-grow: 1;
position: relative;
max-width: 927px;
@media($sm-1679){
max-width: 700px;
}
@media($sm-1441){
max-width: 680px;
}
@media($sm-1199){
max-width: 540px;
}
@media($sm-991){
max-width: 300px;
}
@media($sm-767){
display: none;
}
.search-btn{
position: absolute;
right: 20px;
top: 0;
bottom: 0;
padding: 0px;
background-color: transparent;
border: 0px;
box-shadow: none;
width: 14px;
// height: 14px;
}
.form-control{
border: 1px solid #232326;
background-color: #181819;
border-radius: 30px;
color: #fff;
font-family:$primary-font;
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
height: 54px;
padding-left: 36px;
display: flex;
align-items: center;
@media($sm-1679){
font-size: 13px;
height: 52px;
}
@media($sm-1441){
// font-size: 12px;
height: 48px;
}
@media($sm-1199){
height: 44px;
}
&::placeholder{
color: #fff;
font-family:$primary-font;
font-weight: 400;
font-size: 14px;
@media($sm-1679){
font-size: 13px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
}
}
.header{
background-color: $dark;
@media($sm-991){
position: fixed;
width: 100%;
z-index: 999;
// top: 75px;
}
.outer-sec{
display: flex;
position: relative;
}
.cart-mob{
display: none;
@media($sm-991){
display: flex;
align-items: center;
background-color: transparent;
padding: 0px;
box-shadow: none;
-webkit-appearance:none;
border: none;
margin-top: 6px;
margin-left: 6px;
}
.icons{
flex-shrink: 0;
position: relative;
margin-right: 5px;
img{
display: flex;
flex-shrink: 0;
width: 21px;
height: 17px;
filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(454%) hue-rotate(339deg) brightness(86%) contrast(88%);
@media($sm-1679){
width: 18px;
height: 15px;
}
@media($sm-1441){
width: 16px;
height: 13px;
}
@media($sm-1199){
width: 14px;
height: 10px;
}
@media($sm-991){
width: 34px;
height: 16px;
}
}
}
.badge{
position: absolute;
width: 22px;
height: 22px;
border-radius: 50px;
background-color:#CD6429;
display: flex;
align-items: center;
justify-content: center;
font-family:$primary-font;
font-weight: 500;
font-size: 13.44px;
top: -8px;
/* right: 0; */
left: -12px;
@media($sm-1679){
width: 18px;
height: 18px;
font-size: 11px;
left: -4px;
top: -10px;
}
@media($sm-1441){
width: 16px;
height: 16px;
font-size: 10px;
}
@media($sm-1199){
width: 14px;
height: 14px;
font-size: 9px;
}
}
}
.search-bar-mob{
margin-right: 10px;
transition: all 0.3s ease-in-out;
position: absolute;
top: 70px;
left: 0px;
background-color: #171717;
width: 100%;
padding: 10px;
box-shadow: 0 4px 5px #00000094;
.form-control{
width: 100%;
border: 1px solid #4f4f51;
background-color: #181819;
border-radius: 30px;
color: #fff;
font-family:$primary-font;
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
height: 54px;
padding-left: 36px;
display: flex;
align-items: center;
@media($sm-1679){
font-size: 13px;
height: 52px;
}
@media($sm-1441){
// font-size: 12px;
height: 48px;
}
@media($sm-1199){
height: 44px;
}
&::placeholder{
color: #fff;
font-family:$primary-font;
font-weight: 400;
font-size: 14px;
@media($sm-1679){
font-size: 13px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
}
.search-btn{
margin-right: 10px;
display: none;
padding: 0px;
background-color: transparent;
border: 0px;
box-shadow: none;
width: 20px;
img{
width: 100%;
}
@media($sm-991){
display: block;
}
}
.header-inner{
display: flex;
justify-content: space-between;
align-items: center;
flex: 1; // margin: auto;
@media($sm-991){
width: 100%;
flex-direction: column;
}
}
.nav-bar-inner{
justify-content: space-between;
// justify-content: center;
@media($sm-991){
width: 100%;
position: fixed;
top: 0;
right: -100%;
height: 100vh;
background-color: #000;
transition: right 0.4s ease;
z-index: 999;
padding: 20px;
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
display: block;
}
}
&.navbar-open .nav-bar-inner {
right: 0;
}
.custom-toggler {
width: 60px;
position: relative;
border: none;
background: none;
z-index: 1000;
@media($sm-579){
width: 40px;
}
}
.custom-toggler .bar {
display: block;
height: 3px;
width: 100%;
background-color: $primary;
margin: 5px 0;
transition: all 0.3s ease;
}
.toggler-active .bar:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.toggler-active .bar:nth-child(2) {
opacity: 0;
}
.toggler-active .bar:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.logo-sec{
@media($sm-991){
width: 100%;
display: flex;
justify-content: space-between;
}
}
.logo{
img{
max-width: 163px;
@media($sm-1679){
max-width: 140px;
}
@media($sm-1441){
max-width: 120px;
}
}
}
.navbar{
padding: 13px 0px;
}
.navbar-nav{
.dropdown-menu{
background: #181819;
color: #fff;
margin-top: 2px;
// margin-top: 6px;
// margin-top: 10px;
li{
margin-bottom: 10px;
a{
color: #fff;
font-family:$primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
@media($sm-1199){
font-size: 10px;
}
@media($sm-991){
font-size: 14px;
}
&:hover {
color: #CD6429;
background-color: transparent;
}
}
}
}
.nav-item{
&.contact-item{
.dropdown-toggle{
&::after{
display: none !important;
}
}
}
&:hover{
.dropdown-menu{
display: block;
@media($sm-991){
display: none;
}
}
}
.dropdown-menu.show{
@media($sm-991){
display: block;
}
}
.nav-link{
font-family:$primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
// margin:0px 22.5px;
margin-right: 50px;
padding: 0px;
color: #fff;
padding-bottom: 10px;
position: relative;
@media($sm-1679){
font-size: 14px;
margin-right: 40px;
}
@media($sm-1441){
font-size: 12px;
margin-right: 30px;
}
@media($sm-1199){
margin-right: 20px;
font-size: 10px;
}
@media($sm-991){
font-size: 12px;
margin: 15px 0px;
padding-left: 20px !important;
}
&:hover , &.active{
color: #CD6429 !important;
}
&.dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
width: 13px;
height: 10px;
background-image: url(../img/arrow.svg);
background-size: contain;
background-repeat: no-repeat;
border: none;
position: absolute;
bottom: 10px;
@media($sm-1679){
width: 10px;
height: 8px;
}
}
}
&:first-child{
.nav-link{
padding-left: 44.5px;
}
}
&:last-child{
.nav-link{
padding-right: 0px;
}
}
}
}
.notification-sec{
display: flex;
justify-content: space-between;
align-items: center;
@media($sm-991){
flex-wrap: wrap;
padding-left: 25px;
}
.icon-btn{
position: relative;
display: flex;
align-items: center;
font-family:$primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
margin:0px 17.5px;
text-decoration: none;
color: #fff;
@media($sm-1679){
font-size: 14px;
margin: 0px 14px;
}
@media($sm-1441){
font-size: 12px;
margin: 0px 12px;
}
@media($sm-1199){
font-size: 10px;
margin: 0px 10px;
}
@media($sm-991){
width: 100%;
margin: 15px 0px;
}
&.cart-desk{
@media($sm-991){
display: none;
}
}
&:last-child{
margin-right: 0px;
}
&:hover {
color: #CD6429;
.icons{
img{
filter: brightness(0) saturate(100%) invert(47%) sepia(40%) saturate(909%) hue-rotate(338deg) brightness(91%) contrast(94%);
}
}
}
&.active{
color: #CD6429;
.icons{
img{
filter: brightness(0) saturate(100%) invert(47%) sepia(40%) saturate(909%) hue-rotate(338deg) brightness(91%) contrast(94%);
}
}
}
.icons{
flex-shrink: 0;
position: relative;
margin-right: 5px;
img{
display: flex;
flex-shrink: 0;
width: 21px;
height: 17px;
@media($sm-1679){
width: 18px;
height: 15px;
}
@media($sm-1441){
width: 16px;
height: 13px;
}
@media($sm-1199){
width: 14px;
height: 10px;
}
@media($sm-991){
width: 34px;
height: 16px;
}
}
}
.badge{
position: absolute;
width: 22px;
height: 22px;
border-radius: 50px;
background-color:#CD6429;
display: flex;
align-items: center;
justify-content: center;
font-family:$primary-font;
font-weight: 500;
font-size: 13.44px;
top: -8px;
/* right: 0; */
left: -12px;
@media($sm-1679){
width: 18px;
height: 18px;
font-size: 11px;
left: -4px;
top: -10px;
}
@media($sm-1441){
width: 16px;
height: 16px;
font-size: 10px;
}
@media($sm-1199){
width: 14px;
height: 14px;
font-size: 9px;
}
}
}
}
// .mega-menu {
// width: 800px;
// left: 0;
// right: 0;
// margin: auto;
// background: #181819;
// padding: 20px;
// h6 {
// color: #CD6429;
// font-size: 14px;
// margin-bottom: 10px;
// }
// a {
// color: #fff;
// font-size: 13px;
// display: block;
// margin-bottom: 5px;
// text-decoration: none;
// &:hover {
// color: #CD6429;
// }
// }
// }
.navbar-toggler{
box-shadow: none;
@media($sm-991){
span{
display: block;
width: 30px;
height: 1px;
background-color: #fff;
margin: 5px 0px;
}
}
}
}
.dropdown-item.active, .dropdown-item:active {
background-color: transparent !important;
}