/* Header area css
============================================================================================ */
.main_header_area{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 25;
& + section,& + div,& + .row{
margin-top: 152px;
}
&.navbar_fixed{
.main_menu_area{
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
background: #fff;
transform: translateY(70px);
transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
z-index: 999;
.navbar.navbar-default{
.nav.navbar-nav.navbar-right{
li{
a{
color: $dip;
}
&.active{
a{
color: $baseColor;
}
}
}
}
}
}
}
}
.header_top_area{
background: #1e2126;
.pull-left{
a{
font-size: 13px;
font-family: $open;
color: $dw;
line-height: 50px;
margin-right: 60px;
position: relative;
display: inline-block;
&:before{
content: "";
background: #333;
width: 1px;
position: absolute;
left: -30px;
top: -1px;
height: 100%;
}
i{
font-size: 20px;
color: $dw;
padding-right: 10px;
}
&:first-child{
margin-left: 40px;
&:before{
left: -40px;
}
}
&:last-child{
margin-right: 0px;
&:after{
content: "";
background: #333;
width: 1px;
position: absolute;
right: -30px;
top: -1px;
height: 100%;
}
}
}
}
}
.header_social{
li{
display: inline-block;
margin-right: 20px;
a{
font-size: 14px;
color: $dw;
line-height: 50px;
@include transition;
}
&:last-child{
margin-right: 0px;
}
&:hover{
a{
color: #00aced;
}
}
}
}
.main_menu_area{
background: #fff;
z-index: 30;
.navbar.navbar-default{
background: transparent;
margin-bottom: 0px;
border: none;
.navbar-header{
.navbar-brand{
line-height: 97px;
display: inline-block;
padding: 0px;
img{
line-height: 40px;
display: inline-block;
& + img{
display: none;
}
}
}
}
.nav.navbar-nav.navbar-right{
li{
margin-right: 28px;
a{
padding: 0px;
font-size: 14px;
font-family: $mon;
font-weight: bold;
text-transform: uppercase;
color: $dip;
line-height: 100px;
@include transition;
background: transparent;
}
&.icon_search{
margin-right: 0px;
a{
position: relative;
&:before{
content: "02";
background: $baseColor;
height: 20px;
width: 20px;
border-radius: 50%;
color: #fff;
font-size: 10px;
position: absolute;
right: -14px;
top: 40%;
line-height: 21px;
transform: translateY(-50%);
font-weight: normal;
text-align: center;
}
}
}
&:hover, &.active{
a{
color: $baseColor;
}
}
&.submenu{
position: relative;
.dropdown-menu{
@media (min-width: 992px){
position: absolute;
top: 100%;
left: -40px;
min-width: 232px;
background: #eeeeee;
text-align: left;
opacity: 0;
transition: all 300ms ease-in;
visibility: hidden;
display: block;
padding: 0px;
border: none;
border-radius: 0px;
}
&:before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #eeeeee transparent transparent transparent;
position: absolute;
right: 24px;
top: 45px;
z-index: 3;
opacity: 0;
transition: all 400ms linear;
}
li{
display: block;
float: none;
margin-right: 0px;
border-bottom: 1px solid #cbcbcb;
a{
line-height: 45px;
color: #494848;
font-family: $mon;
font-weight: normal;
font-size: 16px;
padding: 0px 30px;
text-transform: capitalize;
@include transition;
display: block;
}
&:last-child{
border-bottom: none;
}
&:hover{
a{
background: $baseColor;
color: #fff;
}
}
}
}
&:hover{
.dropdown-menu{
@media (min-width: 992px){
left: 0px;
visibility: visible;
opacity: 1;
}
}
}
}
}
}
}
}
.transparent_menu{
.main_menu_area{
background: transparent;
.navbar.navbar-default{
border-bottom: 1px solid rgba(186, 186, 186, .40);
border-radius: 0px;
.nav.navbar-nav.navbar-right{
li{
a{
color: #fff;
}
&:hover, &.active{
> a{
color: $baseColor;
}
}
}
}
}
}
& + section,& + div,& + .row{
margin-top: 0px;
}
}
/* End Header area css
============================================================================================ */