File: /var/www/html/wpkoopkj/wp-content/themes/ohio/assets/sass/layouts/header/_header.scss
.header {
background: transparent;
vertical-align: middle;
left: 0;
right: 0;
z-index: 60;
border-style: none;
border-width: 0;
border-bottom-width: 1px;
border-bottom-color: $color-border;
&:not(.-fixed) {
position: absolute;
}
&-cap {
width: 100%;
height: $header-height;
}
&-wrap {
position: relative;
z-index: 1;
height: $header-height;
.left-part,
.right-part,
.top-part {
@include flex;
@include align-items(center);
}
.right-part {
@include flex-just(flex-end);
}
&-inner {
height: 100%;
@include flex;
@include align-items(center);
@include flex-just(space-between);
&.vertical-inner {
@include flex-direction(column);
}
.menu-optional {
@include flex;
@include align-items(center);
}
}
&:not(.page-container) {
@include spacer(padding-left);
@include spacer(padding-right);
}
&.wrapped-container {
padding: 0 15px;
}
.top-part {
width: 100%;
@include flex;
@include align-items(center);
@include flex-just(space-between);
@include tablet-screen {
&.page-container {
padding: 0;
}
}
}
.bottom-part {
width: 100%;
@include flex;
@include align-items(center);
@include flex-just(center);
}
}
// Hide mobile social networks
.social-bar {
display: none;
}
// Unlist
ul {
li {
list-style: none;
}
}
.logo-sticky,
.logo-mobile,
.logo-sticky-mobile {
display: none;
}
@include md-screen {
.desktop-hamburger {
min-width: 56px;
&.-left {
margin-right: 1rem;
}
&.-right {
margin-left: 1rem;
}
}
}
&:not(.-sticky) {
.mobile-overlay {
.icon-button {
color: initial;
}
}
}
// Header Type2
@import "header-type2";
// Header Type3
@import "header-type3";
// Header Type4
@import "header-type4";
// Header Type5
@import "header-type5";
// Header Type6
@import "header-type6";
// Header Type7
@import "header-type7";
// Desktop
&:not(.-mobile) {
&.header-5,
&.header-6,
&.header-7 {
border-bottom: none !important;
border-right-width: 1px;
border-right-color: $color-border;
}
&.header-6,
&.header-7 {
position: fixed;
width: $header-height-6;
left: 0;
top: 0;
height: 100%;
border-bottom: none;
&.-sticky {
.header-wrap {
height: 100%;
}
}
.header-wrap {
height: 100%;
}
.vertical-inner {
@include spacer2x(padding-top);
@include spacer2x(padding-bottom);
}
.header-wrap {
padding: 0;
}
& ~ .hamburger-nav {
&.split {
left: 80px;
z-index: 100;
}
}
.cart-mini {
top: auto;
right: auto;
left: 0;
bottom: -3.25rem;
position: fixed;
transform-origin: left bottom;
transform: rotate(90deg) translate(0%, 0%);
@include spacer(margin-bottom);
}
// Hide main menu
.menu {
display: none;
}
.branding {
position: absolute;
left: 0;
min-width: 35vh;
min-height: $header-height-6;
transform-origin: left top;
transform: rotate(-90deg) translate(-100%, 0%);
@include flex-just(flex-end);
}
.top-part {
&-inner {
width: 100%;
position: relative;
@include flex;
@include align-items(center);
@include flex-just(center);
}
.menu-blank {
display: none;
}
}
.bottom-part {
height: auto;
position: relative;
@include flex-direction(column);
// Menu optional
.menu-optional {
position: absolute;
left: 0;
bottom: 0;
height: $header-height-6;
transform-origin: left bottom;
transform: rotate(-90deg) translate(0%, 100%);
> li {
&:first-child {
padding-left: 0;
padding-right: 0;
}
&:last-child {
padding-left: 1rem;
}
}
.button {
white-space: nowrap;
}
.lang-dropdown {
min-width: 92px;
}
@include md-screen {
.holder,
.search-global,
.favorites-global,
.account-global {
transform-origin: left bottom;
transform: rotate(90deg) translate(-100%, 0);
}
}
.cart-button {
@include flex-direction(row-reverse);
}
}
}
}
&.extended-menu {
.hamburger {
display: none;
}
}
&.hamburger-position-right {
.left-part,
.menu-optional-left,
.top-part {
.hamburger {
@include inline-flex;
}
}
.right-part,
.menu-optional-right,
.bottom-part {
.hamburger {
@include inline-flex;
}
}
}
&.hamburger-position-left {
.right-part,
.menu-optional-right,
.bottom-part {
.hamburger {
display: none;
}
}
.left-part,
.menu-optional-left,
.top-part {
.hamburger {
@include inline-flex;
}
}
}
}
// Mobile
&.-mobile {
// Social networks
.social-bar {
@include flex;
}
&.header-5,
&.header-6,
&.header-7 {
.header-wrap-inner {
@include flex-direction(row);
.top-part,
.middle-part {
@include align-items(center);
@include flex-just(flex-start);
}
.middle-part {
@include flex;
}
.bottom-part {
@include flex-just(flex-end);
}
}
}
&.header-6,
&.header-7 {
.top-part-inner,
.middle-part-inner {
@include flex;
}
}
}
@include sm-screen {
// Hide all headers styles on mobile
& {
opacity: 0;
transition-duration: 0.05s;
transition-timing-function: $transition-function;
transition-property: opacity;
}
.lang-dropdown-holder {
display: none;
+ li {
padding-left: 0;
}
}
&.header-6,
&.header-7 {
.hamburger {
margin-right: 0.6rem;
}
.mobile-hamburger {
&.-right {
.hamburger {
margin-right: 0;
}
}
}
.bottom-part {
// Menu optional
.menu-optional {
a, .ion {
transition: none;
}
}
}
}
.mobile-hamburger {
min-width: 56px;
&.-left {
margin-right: 0.6rem;
}
&.-right {
margin-left: 0.6rem;
}
}
&.mobile-hamburger-position-right {
.left-part,
.menu-optional-left,
.top-part,
.middle-part {
.hamburger {
display: none;
}
}
.right-part,
.menu-optional-right,
.bottom-part {
.hamburger {
display: block;
}
}
}
&.mobile-hamburger-position-left {
.right-part,
.menu-optional-right,
.bottom-part {
.hamburger {
display: none;
}
}
.left-part,
.menu-optional-left,
.top-part,
.middle-part {
.hamburger {
display: block;
}
}
}
.logo {
&.with-mobile {
display: none;
}
}
.logo-mobile {
@include flex;
@include align-items(center);
}
&.header-2,
&.header-4 {
.top-part {
height: 100%;
}
.menu-optional {
&.-right,
&.-left {
@include flex;
@include align-items(center);
li {
@include flex;
}
}
}
}
}
// Header Sticky
@import "header-sticky";
}
// Logo
@import "header-branding";
// Extras
@import "header-extra";
// Subheader
@import "header-subheader";