153 lines
3.6 KiB
SCSS
Executable File
153 lines
3.6 KiB
SCSS
Executable File
// Header left right padding
|
|
.header-area {
|
|
.main-header {
|
|
padding: 0px 100px;
|
|
@media #{$laptop}{
|
|
padding: 0px 30px;
|
|
}
|
|
@media #{$lg}{
|
|
padding: 0px 15px;
|
|
}
|
|
// mobile menu show
|
|
@media #{$md}{
|
|
padding: 22px 50px;
|
|
}
|
|
@media #{$sm}{
|
|
padding: 22px 20px;
|
|
}
|
|
@media #{$xs}{
|
|
padding: 22px 14px;
|
|
}
|
|
}
|
|
}
|
|
// Header Bottom
|
|
.main-header{
|
|
.main-menu{
|
|
@media #{$laptop}{
|
|
margin-right: 30px;
|
|
}
|
|
& ul{
|
|
& li{
|
|
display: inline-block;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
& a{
|
|
color: #000019;
|
|
font-weight: 500;
|
|
padding: 39px 10px;
|
|
display: block;
|
|
font-size: 16px;
|
|
@include transition(.3s);
|
|
text-transform: capitalize;
|
|
position: relative;
|
|
margin: 0 23px;
|
|
font-family: $font_2;
|
|
@media #{$lg}{
|
|
padding: 39px 15px;
|
|
margin: 0 10px;
|
|
}
|
|
@media #{$laptop}{
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
&:hover{
|
|
& > a{
|
|
color:$theme-color;
|
|
}
|
|
}
|
|
}
|
|
& ul.submenu{
|
|
position: absolute;
|
|
width: 170px;
|
|
background: #fff;
|
|
left: 0;
|
|
top: 120%;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
|
|
padding: 17px 0;
|
|
// border-top: 5px solid $theme-color;
|
|
@include transition(.3s);
|
|
& > li{
|
|
margin-left: 7px;
|
|
display: block;
|
|
& > a{
|
|
padding: 6px 10px !important;
|
|
font-size: 16px;
|
|
text-transform: capitalize;
|
|
margin: 0;
|
|
&:hover{
|
|
color:$theme-color;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.logo{
|
|
& img{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-menu ul li.active > a::before {
|
|
width: 100%;
|
|
}
|
|
.main-menu ul li:hover > a::before {
|
|
width: 100%;
|
|
}
|
|
.main-header .main-menu ul ul.submenu > li > a:hover {
|
|
padding-left: 15px !important;
|
|
}
|
|
.main-header .main-menu ul ul.submenu > li > a:hover::before {
|
|
width: 10px;
|
|
}
|
|
|
|
|
|
.main-header ul > li:hover > ul.submenu {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
top: 100%;
|
|
}
|
|
|
|
.main-header .header-sticky.sticky-bar{
|
|
background: #fff;
|
|
}
|
|
.header-sticky.sticky-bar .main-menu ul>li>a {
|
|
padding:27px 13px;
|
|
margin: 0 10px;
|
|
}
|
|
.header-transparent {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
}
|
|
// Mobile Menu slick Nav
|
|
.mobile_menu {
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 100%;
|
|
z-index: 99;
|
|
.slicknav_menu {
|
|
background: transparent;
|
|
margin-top: 16px !important;
|
|
}
|
|
.slicknav_menu .slicknav_nav a:hover {
|
|
background: transparent;
|
|
color: $theme-color;
|
|
}
|
|
.slicknav_menu .slicknav_icon-bar {
|
|
background-color: $theme-color !important;
|
|
}
|
|
.slicknav_btn {
|
|
top: -55px;
|
|
}
|
|
.slicknav_nav {
|
|
margin-top: 0px;
|
|
}
|
|
} |