.site-header { background-color: #fff; position: relative; z-index: 999; } .site-header-inner { padding-top: 15px; padding-bottom: 155px; } .botiga-offcanvas-menu, .mobile-header { display: none; } .mobile-header-item { margin-bottom: 30px; &:last-of-type { margin-bottom: 0; } .align-right { text-align: right; } } @media ( max-width: 1024px ) { .bottom-header-row, .site-header { display: none; } .mobile-header { display: block; padding-top: 15px; padding-bottom: 15px; .align-right { justify-content: flex-end; text-align: right; } .align-center { text-align: center; } } .botiga-offcanvas-menu { display: block; } } .site-title { @include font-size(24); margin: 0; a, a:visited { color: $color__primary; } } .site-description { margin: 5px 0 0; } .header-elements { display: flex; align-items: center; } .header_layout_1, .header_layout_2 { .header-elements { justify-content: flex-end; } } .header_layout_2 { .row { justify-content: space-between; } .menu-col { flex-grow: 1; } .menu-center .main-navigation > div > ul { justify-content: center; } .menu-right .main-navigation > div > ul { justify-content: flex-end; } .header-col { padding-left: 15px; padding-right: 15px; } } .header_layout_1, .header_layout_3, .header_layout_5 { .site-branding { text-align: center; } } .header_layout_3, .header_layout_4, .header_layout_5 { border-bottom: 1px solid rgba( $color__primary, 0.1); } .bottom-header_layout_3 { .main-navigation { & > div > ul { justify-content: center; } } } .header_layout_3, .bottom-header_layout_3, .bottom-header_layout_4, .header_layout_4, .bottom-header_layout_5, .header_layout_5 { .header-elements:not(:first-of-type) { justify-content: flex-end; } } .site-header { .top-header-row { padding-top: 15px; padding-bottom: 15px; } &.header_layout_3, &.header_layout_4, &.header_layout_5 { .site-header-inner { padding: 0; } } } .sticky-header { &.sticky-scrolltop { position: sticky; top: -200px; transition: top 0.4s; } &.is-sticky, &.sticky-always { position: sticky; top: 0; .admin-bar & { top: 32px; } } &.sticky-shadow, &.is-sticky { box-shadow: 0 0 30px rgba(0, 0, 0, 0.07 ); } } .bottom-header-row { background-color: #fff; z-index: 999; } .bottom-header-inner { padding-top: 15px; padding-bottom: 15px; } .header-item { margin-right: 25px; line-height: 1; &:last-child { margin-right: 0; } } .top-bar-contact, .header-contact { a { i { margin-right: 5px; } } } .top-bar-contact { a { margin-right: 15px; &:last-of-type { margin-right: 0; } } } .header-contact { a { display: block; margin-bottom: 5px; &:last-of-type { margin-bottom: 0; } } } .header-search { .icon-search, .icon-cancel { display: none; cursor: pointer; position: relative; z-index: 999; &.active { display: inline-block; } } .icon-cancel { svg { width: 20px; height: 24px; } } } .icon-cancel { cursor: pointer; path { transform: scale(0.75); } } .header-search-form { position: absolute; width: 100%; top: 100%; background-color: #fff; padding: 40px 15px 60px; z-index: 999999; left: -9999em; opacity: 0; transition: opacity 0.3s; visibility: hidden; form { max-width: 720px; margin-left: auto; margin-right: auto; display: flex; .search-field { width: 100%; } button, .search-field { display: block; min-height: 60px; svg { fill: #fff; } } button { padding: 13px 24px !important; border-radius: 0 !important; font-size: 14px !important; } } &.active { opacity: 1; left: 0; visibility: visible; } } .search-overlay { position: fixed; top: 0; height: 100%; width: 100%; z-index: 998; background-color: rgba( $color__primary, 0.3); left: -100%; opacity: 0; transition: opacity 0.3s; &.active { opacity: 1; left: 0; } } .top-bar-inner { padding-top: 15px; padding-bottom: 15px; } .top-bar { border-bottom: 1px solid rgba( $color__primary, 0.1); .social-profile { line-height: 1; a { margin-right: 15px; &:last-of-type { margin-right: 0; } } } .header-item { display: flex; } .col { &:last-of-type { justify-content: flex-end; } & > *:after { color: rgba( $color__primary, 0.3 ); } } } .header-image { img { width: 100%; vertical-align: top; } } .custom-logo-link { line-height: 1; img { max-width: 180px; } & + .site-title { margin-top: 10px; } }