/* ---------------------------------------------------------------- */
/* 09.Header
/* ---------------------------------------------------------------- */
.header {
padding: 10px 0;
transition: all 400ms cubic-bezier(0.65, 0, 0.35, 1);
.navbar-brand {
padding: 0;
color: $color_white;
margin-right: 0;
text-transform: capitalize;
img {
display: none;
&.logo-transparent {
display: block;
}
}
}
.navbar-btn-resp {
.primary-btn {
&:hover {
background: $color_white;
.text {
color: $color_primary !important;
}
.icon {
border-color: $color_primary;
i {
background: $color_primary;
color: $color_white;
}
}
}
}
}
.nav-item {
.nav-link {
color: $color_white;
font-size: 0.875rem;
font-weight: 600;
padding: 28px 20px;
text-transform: uppercase;
display: block;
position: relative;
line-height: 28px;
opacity: 0.8;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: $color_white;
}
&.active {
opacity: 1;
}
&:not(.active) {
&:after {
left: 0;
bottom: 0;
width: 100%;
height: 7px;
z-index: 7;
content: '';
position: absolute;
transform: scaleX(0);
transform-origin: 100% 0;
background: $color_white;
transition: transform 0.4s ease;
}
&:hover {
&:after {
transform: scaleX(1);
transform-origin: 0 0;
}
}
}
}
&:hover {
> a {
color: $color_white;
opacity: 1;
}
}
&.dropdown {
&:hover {
.nav-link {
&:after{
transform: scaleX(1);
transform-origin: 0 0;
}
}
}
.dropdown-menu {
border: 0;
padding: 0;
margin: 0;
border-radius: 0;
background-color: $color_white;
box-shadow: 0 3px 10px 0 rgba($color_primary,0.1);
.dropdown-item {
width: 100%;
color: $color_black;
font-size: 0.875rem;
display: block;
font-weight: 400;
padding: 12px 20px;
position: relative;
text-decoration: none;
border-bottom: 1px solid rgba($color_black,0.05);
transition: all 0.25s ease;
&:hover {
color: $color_white;
background: $color_primary;
border-bottom-color: $color_primary;
}
&:last-child {
border-bottom: 0;
}
}
}
.dropdown-toggle {
padding-right: 25px !important;
&:after {
display: inline-block;
margin-left: 0;
vertical-align: initial;
content: "";
border:none;
}
&:before {
content: "\f078";
top: 50%;
right: 0;
position: absolute;
font: {
weight: 700;
family: "Font Awesome 5 Free";
size: 12px;
}
transition: all 0.25s ease;
transform: translateY(-50%);
}
&[aria-expanded="true"]:before {
top: 28px;
transform: rotate(180deg);
}
}
}
}
.navbar-toggler {
outline: none;
border: none;
border-radius: 0;
padding: 0 10px 0 0;
box-shadow: none;
.togler-icon-inner {
span {
height: 3px;
margin: 5px;
width: 30px;
display: block;
background: $color_white;
transition: all 0.3s ease;
&:nth-child(2) {
width: 20px !important;
margin-left: auto;
}
&:last-child {
margin-bottom: 0;
}
}
}
&[aria-expanded="true"] {
.togler-icon-inner {
span {
&:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
}
}
}
}
}
.header-shrink {
border-bottom:none;
padding: 0;
background: $color_white;
box-shadow: 0 3px 10px 0 rgba($color_primary,0.1);
.navbar-btn-resp {
.primary-btn {
&:hover {
background: $color_dark;
.text {
color: $color_white !important;
}
.icon {
border-color: $color_primary;
i {
background: $color_primary;
color: $color_white;
}
}
}
}
}
.nav-item {
&:hover {
.nav-link {
color: $color_primary;
}
}
.nav-link {
color: $color_black;
opacity: 1;
&.active, &:hover{
color: $color_primary;
}
&:after {
background: $color_primary;
}
&:not(.active) {
&:after {
background: $color_primary;
}
}
}
}
.navbar-toggler {
.togler-icon-inner {
span {
background-color: $color_dark;
}
}
}
}
/* ---------------------------------------------------------------- */
/* Responsive Media Query
* Medium devices (tablets, less than 992px)
/* ---------------------------------------------------------------- */
@media only screen and (max-width:991.98px) {
.header {
.container {
max-width: 100%;
padding: 0;
}
.navbar-brand {
padding: 10px 0 10px 15px;
}
.main-menu {
background: $color_white;
.navbar-nav {
max-height: 230px;
overflow: hidden;
overflow-y: auto;
.nav-item {
&:nth-child(6) {
.nav-link {
border-bottom: 0;
}
}
}
.nav-link {
color: $color_black;
padding: 7px 15px !important;
transition: $trs_linear;
opacity: 1;
border-bottom: 1px solid $color_soft_grey;
&:after {
display: none;
}
&.active {
background: $color_primary;
color: $color_white !important;
border-color: $color_primary;
}
&:not(.active) {
&:hover {
background: $color_primary;
color: $color_white !important;
border-color: $color_primary;
}
}
}
}
.nav-item {
.dropdown-menu {
background: rgba($color_primary,0.06);
.dropdown-item {
&:hover {
background: $color_primary;
}
}
}
}
}
.dropdown-toggle {
&:before {
top: 23px !important;
right: 20px !important;
}
&[aria-expanded="true"]{
&:before {
top: 7px !important;
transform: rotate(180deg) !important;
}
}
}
}
.navbar-btn-resp {
display: none !important;
}
/* Header Shrink */
.header-shrink {
.nav-item {
&:hover {
.nav-link {
color: $color_primary;
}
}
.nav-link {
color: $color_black;
&.active, &:hover{
color: $color_primary;
}
&:after {
background: $color_primary;
}
&:not(.active) {
&:after {
background: $color_primary;
}
}
}
}
.togler-icon-inner {
span {
background-color: $color_black;
}
}
}
}
/* ---------------------------------------------------------------- */
/* Responsive Media Query
* Large devices (desktop, less than min-width: 992px)
/* ---------------------------------------------------------------- */
@media screen and (min-width:991.98px) {
.dropdown-menu {
border:0;
top: 100%;
left: 0;
transform-origin: top;
transform: rotateX(90deg);
color: $color_black;
z-index: 15;
opacity: 0;
visibility: hidden;
display: initial;
min-width: 230px;
border-radius: 0;
position: absolute;
&.show {
opacity: 1;
top: 100%;
visibility: visible;
transition: $trs_linear;
transform: rotateY(0deg);
}
}
} |