File: /var/www/zaklada/html/lib/scss/layouts/_header.scss
.site-header {
background: $color-blue-dark;
width: 100%;
position: fixed;
z-index: 10;
height: 50px;
@media screen and (min-width: 992px) {
height: 100px;
}
& > .container {
height: 100%;
}
&__wrap {
display: flex;
flex-direction: column;
overflow: auto;
width: 100%;
position: absolute;
left: 0;
top: 50px;
background: $color-blue-dark;
padding: 5px 0 50px 0;
height: calc(100vh - 50px);
// if we want to use top instead of transform
// top: calc(100vh - 50px);
transform: translateY(-120%);
transition: transform 500ms ease-in-out;
z-index: 5;
&.open {
transform: translateY(0);
// if we want to use top instead of transform
// top: 50px;
}
@media screen and (max-width: 991px) {
@media screen and (min-height: 620px) {
padding: 20px 0 50px 0;
}
}
@media screen and (min-width: 992px) {
transform: none;
padding: 0;
background: transparent;
position: relative;
top: initial;
left: initial;
width: auto;
overflow: visible;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 100%;
&.open {
height: 100%;
}
}
}
&__nav {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-top: 20px;
&--second {
margin-top: 0;
}
@media screen and (min-width: 992px) {
margin-top: 0;
display: flex;
flex-direction: row;
align-items: center;
flex-basis: 40%;
&--first {
justify-content: flex-start;
}
&--second {
justify-content: flex-end;
}
}
}
&__item {
margin-right: 0px;
margin-bottom: 0px;
position: relative;
@media screen and (max-width: 991px) {
@media screen and (min-height: 620px) {
margin-bottom: 15px;
}
}
@media screen and (min-width: 992px) {
margin-right: 25px;
margin-bottom: 0 !important;
&:last-of-type {
margin-right: 0;
}
}
&.btn {
padding: 0;
@media screen and (max-width: 991px) {
width: 100%;
justify-content: flex-end;
padding: 0;
}
.site-header__link {
&:after {
display: none;
}
}
}
&.active {
.site-header__link {
// font-weight: 700;
font-weight: bold;
&:after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
height: 4px;
width: 100%;
background: $color-gold-dark;
}
}
&.btn {
background: transparent;
border: 2px solid #fff;
}
}
&.dropdown {
.site-header__link {
font-weight: 400;
&:after {
opacity: 0;
}
}
&:hover {
.site-header__submenu {
@media screen and (min-width: 992px) {
transform: scaleY(1) scaleX(1);
}
}
}
}
&.lang-dropdown {
margin-bottom: 0;
display: flex;
align-items: center;
position: absolute;
left: 0;
bottom: 25px;
margin-left: 15px;
@media screen and (min-width: 992px) {
margin-left: 0;
position: relative;
left: initial;
bottom: initial;
}
.site-header__link {
margin-right: 4px;
display: flex;
align-items: center;
padding: 0 8px;
@media screen and (min-width: 992px) {
padding: 4px 7px;
}
&:after {
opacity: 0;
}
}
.lang-dropdown {
&__wrap {
display: flex;
align-items: center;
justify-content: center;
&:hover {
.lang-dropdown__submenu {
display: block;
background: #093153;
&:hover {
background: #224664;
}
}
.lang-dropdown__active {
background: #093153;
}
.lang-dropdown__arrow {
transform: rotate(180deg);
}
}
}
&__active {
display: flex;
padding: 8px 10px;
border-radius: 0 0 5px 5px;
@media screen and (min-width: 992px) {
border-radius: 5px 5px 0 0;
margin-top: -4px;
padding: 4px 11px 0 10px;
}
}
&__submenu {
display: none;
position: absolute;
top: -100%;
left: 0;
width: 100%;
padding: 0 10px;
border-radius: 5px 5px 0 0;
@media screen and (min-width: 992px) {
top: 100%;
border-top: 8px solid#093153;
border-radius: 0 0 5px 5px;
border-bottom: 2px solid#093153;
}
}
&__item {
display: flex;
width: 100%;
text-decoration: none;
padding: 10px 0 6px 0;
@media screen and (min-width: 992px) {
padding: 0;
}
}
}
}
&.btn {
.site-header__link {
padding: 5px 31px 5px 20px;
@media screen and (min-width: 992px) {
padding: 5px 20px;
}
}
}
}
&__link {
font-size: rem(20);
line-height: 1.5;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
color: $color-white;
padding: 12px 15px;
display: block;
text-align: right;
&:after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
height: 4px;
width: 0%;
background: $color-gold-dark;
transition: all 200ms ease-in-out;
}
&:hover {
// font-weight: 700;
// font-weight: bold;
&:after {
@media screen and (min-width: 992px) {
width: 100%;
}
}
}
@media screen and (max-width: 991px) {
padding-right: 31px;
}
@media screen and (min-width: 992px) {
text-align: left;
font-size: rem(12);
padding: 0;
}
@media screen and (min-width: 1200px) {
font-size: rem(14);
}
@media screen and (min-width: 1400px) {
font-size: rem(18);
}
&.btn {
&:after {
display: none;
}
}
}
&__submenu {
display: none;
padding: 0 15px 0 15px;
&.open {
display: block;
}
@media screen and (min-width: 992px) {
display: block;
position: absolute;
z-index: 5;
padding: 0;
background: transparent;
width: max-content;
left: 0;
top: calc(100% + 1px);
transition-delay: 250ms;
transition: transform 200ms ease-in-out;
transform: scaleY(0) scaleX(1);
transform-origin: top center;
border-top: 4px solid $color-gold-dark;
padding-top: 5px;
}
}
&__submenu-item {
border-bottom: 1px solid $color-gold-dark;
}
&__submenu-link {
font-weight: 400;
font-size: rem(16);
line-height: 1.5;
color: $color-white;
padding: 6px 18px;
display: block;
text-decoration: none;
transition: all 200ms ease-in-out;
// background: transparent;
background: $color-blue-dark;
@media screen and (max-width: 991px) {
font-size: rem(16);
font-weight: bold;
padding: 6px 10px 6px 5px;
}
&:hover {
background: $color-blue-main;
}
}
&__logo-wrap {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
width: 224px;
position: absolute;
z-index: 10;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
height: 100%;
@media screen and (min-width: 992px) {
width: auto;
position: relative;
left: initial;
top: initial;
position: relative;
transform: none;
flex-basis: 20%;
}
&.logo-desktop {
display: none;
@media screen and (min-width: 992px) {
display: flex;
z-index: 0;
}
}
&.logo-mobile {
&:before {
content: "";
position: absolute;
width: 100vw;
height: 50px;
background: $color-blue-dark;
z-index: -1;
}
@media screen and (min-width: 992px) {
display: none;
}
}
}
&__logo {
transition: all 500ms ease-in-out;
&.logo-main {
margin-right: 15px;
width: calc(50% - 15px);
max-width: 86px;
}
&.logo-text {
max-width: 50%;
}
@media screen and (min-width: 992px) {
width: 100%;
}
@media screen and (min-width: 1200px) {
&.logo-main {
position: absolute;
margin-right: 15px;
width: calc(50% - 15px);
max-width: 66px;
// max-width: 46px;
transform: translateX(0) translateY(-50%);
left: 20px;
top: 50%;
}
&.logo-text {
position: absolute;
max-width: 50%;
right: 20px;
transform: translateX(0) translateY(-50%) scale(1);
top: 50%;
}
}
@media screen and (min-width: 1400px) {
&.logo-main {
// left: 40px;
max-width: 86px;
}
// &.logo-text {
// right: 40px;
// }
width: auto;
}
&.home-top {
display: none;
}
}
}
.hamburger {
position: absolute;
right: 0;
top: calc(50% + 1px);
transform: translateY(-50%);
z-index: 15;
@media screen and (min-width: 992px) {
display: none;
}
&:focus {
outline: none;
}
}
.site-header {
transition: 500ms all ease-in-out;
// background: linear-gradient(180deg, $color-blue-dark 50%, rgba(0, 23, 43, 0) 100%);
&.headroom {
&--not-top {
background: $color-blue-dark;
@media screen and (min-width: 1200px) {
height: 60px;
.site-header {
&__logo {
&.logo-main {
margin-right: 15px;
width: calc(50% - 15px);
// max-width: 86px;
max-width: 46px;
transform: translateX(0);
left: 20px;
top: 5px;
@media screen and (min-width: 1400px) {
left: 40px;
}
}
&.logo-text {
max-width: 50%;
right: 20px;
transform: translateX(0) translateY(-50%) scale(1);
top: 50%;
@media screen and (min-width: 1400px) {
right: 40px;
}
}
}
}
}
}
}
}
.home {
.site-header {
transition: 500ms all ease-in-out;
background: linear-gradient(180deg, $color-blue-dark 50%, rgba(0, 23, 43, 0) 100%);
&__logo {
@media screen and (min-width: 1200px) {
&.logo-main {
max-width: 147px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 20px;
}
&.logo-text {
max-width: 100%;
position: absolute;
right: 50%;
transform: translateX(50%) scale(1.2);
top: calc(100% + 80px);
}
}
}
&.headroom {
&--top {
.site-header {
&__logo {
// @media screen and (min-width: 1200px) {
// &.logo-main {
// max-width: 147px;
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// top: 20px;
// }
// &.logo-text {
// max-width: 100%;
// position: absolute;
// right: 50%;
// transform: translateX(50%) scale(1.2);
// top: calc(100% + 80px);
// }
// }
}
}
}
&--not-top {
background: $color-blue-dark;
@media screen and (min-width: 1200px) {
height: 60px;
.site-header {
&__logo {
&.logo-main {
margin-right: 15px;
width: calc(50% - 15px);
// max-width: 86px;
max-width: 46px;
left: 20px;
transform: translateX(0);
top: 5px;
@media screen and (min-width: 1400px) {
left: 40px;
}
}
&.logo-text {
max-width: 50%;
right: 20px;
transform: translateX(0) translateY(-50%) scale(1);
top: 50%;
@media screen and (min-width: 1400px) {
right: 40px;
}
}
}
}
}
}
}
}
}