<input type="checkbox" id="o-header1-status" class="menu-status d-none jq_menu_status">
<header class="o-header1 menu-for-open">
<div class="container">
<div class="o-header1__inner">
<div class="o-header1__row o-header1__row--under-line">
<div class="o-header1__column o-header1__column--left">
<a href="#" class="o-header1__logo" title="Company Ltd.">
<img src="https://placehold.it/150x50" alt="Logo Company Ltd." class="o-header1__logo__icon">
</a>
</div>
<div class="o-header1__column o-header1__column--right">
<div class="o-header1__nav">
<div class="o-header1__line o-header1__line--icons">
<a href="mailto:info@example.com" class="o-header1__mail">
<i class="o-header1__icon icon-mail" aria-hidden="true"></i> <span class="o-header1__mail__text"> info@example.com</span>
</a>
<a href="tel:+420777666888" class="o-header1__phone">
<i class="o-header1__icon icon-phone" aria-hidden="true"></i> <span class="o-header1__phone__text"> +420 777 666 888</span>
</a>
<input type="checkbox" id="language-status" class="d-none">
<div class="m-lang language-for-open">
<ul class="m-lang__list">
<li class="m-lang__item m-lang__item--active">
<a hreflang="en-EN" href="./en" rel="alternate" class="m-lang__link">
<span class="m-lang__name">EN</span>
</a>
</li>
<li class="m-lang__item">
<a hreflang="cs-CZ" href="./cz" rel="alternate" class="m-lang__link">
<span class="m-lang__name">CZ</span>
</a>
</li>
</ul>
<label for="language-status" class="m-lang__link m-lang__control">
<span class="m-lang__name">EN</span>
<i class="m-lang__caret" aria-hidden="true"></i>
</label>
</div>
<label for="search-status" data-auto-focus=".m-search__input" class="o-header1__search">
<i class="o-header1__icon icon-search" aria-hidden="true"></i>
</label>
</div>
<div class="o-header1__line o-header1__line--under">
<nav class="m-nav-header">
<ul class="m-nav-header__list">
<li class="m-nav-header__item m-nav-header__item--parent m-nav-header__item--active">
<a href="#" class="m-nav-header__link">Menu 01</a>
<ul class="m-nav-dropdown jq_dropdown">
</ul>
<!-- Skip the closing tag -->
<li class="m-nav-header__item m-nav-header__item--parent">
<a href="#" class="m-nav-header__link">Menu 02</a>
<ul class="m-nav-dropdown jq_dropdown">
</ul>
<!-- Skip the closing tag -->
<li class="m-nav-header__item m-nav-header__item--parent">
<a href="#" class="m-nav-header__link">Menu 03</a>
<ul class="m-nav-dropdown jq_dropdown">
<li class="m-nav-dropdown__item">
<a href="#" class="m-nav-dropdown__link">Menu 01</a>
</li>
<li class="m-nav-dropdown__item m-nav-dropdown__item--parent">
<a href="#" class="m-nav-dropdown__link">Menu 02</a>
<ul class="m-nav-dropdown jq_dropdown">
<li class="m-nav-dropdown__item">
<a href="#" class="m-nav-dropdown__link">Menu 03</a>
</li>
<li class="m-nav-dropdown__item">
<a href="#" class="m-nav-dropdown__link">Menu 04</a>
</li>
</ul>
</li>
</ul>
<!-- Skip the closing tag -->
<li class="m-nav-header__item m-nav-header__item--parent">
<a href="#" class="m-nav-header__link">Menu 04</a>
<ul class="m-nav-dropdown jq_dropdown">
</ul>
<!-- Skip the closing tag -->
</ul>
</nav>
</div>
</div>
</div>
<div class="o-header1__column">
<label for="o-header1-status" class="m-hamburger m-hamburger--border">
<span class="m-hamburger__title">MENU</span>
<span class="m-hamburger__icon"></span>
</label> </div>
</div>
</div>
</div>
</header>
<input type="checkbox" id="search-status" class="d-none jq_search_status">
<div class="m-search search-for-open">
<div class="m-search__window">
<div class="m-search__container">
<form action="." method="POST" id="frm-class"="m-search__form">
<div class="row align-items-center">
<div class="col-16 text-left">
<label for="frm-pc-form-q">Search</label>
</div>
<div class="col-8 text-right">
<label for="search-status" class="m-search__icon m-search__close">
<span aria-hidden="true">✕</span>
</label>
</div>
<div class="col-24 jq_valid_input">
<div class="m-search__block">
<div class="w-100">
<input placeholder="Type & hit enter..." name="q" id="frm-pc-form-q" class="m-search__input a-form-input">
</div>
<span class="m-search__submit">
<i class="m-search__icon icon-search" aria-hidden="true"></i>
<input type="submit" class="m-search__action" name="action" id="frm-pc-form-action">
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>@import "molecules/hamburger/index";
@import "molecules/lang/index";
@import "molecules/nav-header/index";
@import "molecules/search/index";
.o-header1 {
background: color('white');
border-bottom: 1px solid color('gray');
position: relative;
z-index: 9;
&--sticky {
position: sticky;
top: 0;
transition: transform $base-transition ease-in-out;
&.is-sticky {
&.sticky-scroll-down {
transform: translateY(-110%);
transition-delay: $base-transition;
}
}
}
&__inner {
padding-bottom: space(1);
padding-top: space(1);
position: relative;
@media(min-width: breakpoint-min($menu-breakpoint)) {
padding-bottom: space(2);
padding-top: space(2);
}
}
&__row {
display: flex;
flex-wrap: wrap;
&--under-line {
@media(min-width: breakpoint-min($menu-breakpoint)) {
padding-bottom: 60px;
position: relative;
}
}
}
&__line {
align-self: center;
margin-left: auto;
margin-right: auto;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
width: 100%;
&--icons {
align-self: flex-end;
order: 9;
}
@each $breakpoint, $container-max-width in $container-max-widths {
$breakpoint: breakpoint-min($breakpoint);
@if strip-unit(breakpoint-min($menu-breakpoint)) > strip-unit($breakpoint) {
@media (min-width: $breakpoint) {
max-width: $container-max-width;
}
}
}
@media(min-width: breakpoint-min($menu-breakpoint)) {
align-self: unset;
margin-left: initial;
margin-right: initial;
max-width: 100%;
padding-left: initial;
padding-right: initial;
width: auto;
+ #{&} {
margin-top: space(1);
}
&--under {
bottom: 0;
left: 0;
margin-top: 0;
position: absolute;
text-align: left;
width: 100%;
}
}
}
&__column {
align-items: center;
display: flex;
&--left {
margin-right: auto;
}
&--right {
margin-left: auto;
text-align: right;
}
&--full {
flex: 0 0 100%;
margin-top: space(1);
width: 100%;
}
}
&__logo {
display: inline-block;
font-size: 0;
&__icon {
display: inline-block;
height: 30px;
vertical-align: middle;
@media(min-width: breakpoint-min($menu-breakpoint)) {
height: 50px;
}
}
}
&__icon {
@include font-size(large);
display: inline-block;
}
&__mail,
&__phone {
@include text-underline(none);
&,
&:hover,
&:focus {
color: color('black');
}
&__text {
display: none;
vertical-align: middle;
@media(min-width: breakpoint-min($menu-breakpoint)) {
display: inline;
margin-left: em(8px);
}
}
&:hover &__text {
text-decoration: underline;
}
}
&__phone,
&__search {
border-left: 1px solid color('gray');
margin-left: 15px;
padding-left: 15px;
@media(min-width: breakpoint-min($menu-breakpoint)) {
border-left: 0;
padding-left: 0;
}
}
&__search {
color: color('black');
cursor: pointer;
display: inline-block;
@media(min-width: breakpoint-min($menu-breakpoint)) {
margin-left: 0;
}
}
&__separator {
border-left: 1px solid color('gray');
display: inline;
line-height: line-height(large);
margin-left: 15px;
margin-right: 15px;
}
&__nav {
background: transparentize(color('white'), .2);
display: flex;
flex-flow: row wrap;
height: 100vh;
left: 100%;
overflow: auto;
padding: 60px 0 40px; // 60px ~ header height
position: fixed;
text-align: right;
top: 0;
transition: $base-transition;
width: 100vw;
z-index: 9;
@media(min-width: breakpoint-min($menu-breakpoint)) {
background: transparent;
display: inline-block;
flex-flow: unset;
height: auto;
left: auto;
overflow: visible;
padding: 0;
position: static;
text-align: right;
top: auto;
transition: none;
width: auto;
}
#{$menu-status} & {
left: 0;
}
}
}import $ from 'jquery';
import 'molecules/nav-header';
$(() => {
$.mq.action(
'menu',
() => $('.jq_menu_status').prop('checked', false).trigger('change'),
() => $('.jq_menu_status').prop('checked', false).trigger('change')
);
$('.jq_menu_status, .jq_search_status').change(function() {
if (this.checked) {
if ($(this).hasClass('jq_search_status') && $('.jq_menu_status').is(':checked')) {
$('.jq_menu_status').prop('disabled', true);
} else {
$('html, body').addClass('no-scroll');
}
$(document).on('keyup', { status: this }, closeOnEscape);
} else {
if ($(this).hasClass('jq_search_status') && $('.jq_menu_status').is(':disabled')) {
$('.jq_menu_status').prop('disabled', false);
} else {
$('html, body').removeClass('no-scroll');
}
$(document).off('keyup', closeOnEscape);
}
});
function closeOnEscape(event) {
if (event.keyCode === 27) {
var args = event.data,
status = args.status;
$(status).prop('checked', false).trigger('change');
}
}
});