Debut Theme / Hamburger menu icon position

Solved
Highlighted
Tourist
9 0 1

Hi every one

 

I would like to change a small detail concerning the positioning of my hamburger icon on the mobile version of my debut theme.

 

by default, the header menu is wide open on normal computer window size, and it reduces to the hamburger icon when the windows is to narrow (mobile version) , and  goes on the top right of the screen, just near the cart icon, but I would like it to go on the top left instead.

 

I tried many things, maybe you coud help me better.

thank you by advance for your time, 

peace

0 Likes
Highlighted
Trailblazer
192 33 53

I may be able to help you if you copy n paste your header.liquid here.

 

You can find the file under sections.

0 Likes
Highlighted
Tourist
9 0 1

here is the code of my header.liquid

sorry for the "messy" presentation...

 

 

 

{% if section.settings.message %}
<style>
{% if section.settings.logo != blank %}
.site-header__logo-image {
max-width: {{ section.settings.logo_max_width | escape }}px;
}
{% endif %}

{% if section.settings.align_logo == 'left' %}
.site-header__logo-image {
margin: 0;
}
{% endif %}
</style>
{% endif %}

{% include 'search-drawer' %}

<div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section>
{% if section.settings.message %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.color_bg }};
}

.announcement-bar--link:hover {
{% assign brightness = section.settings.color_bg | color_brightness %}

{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
{% endif %}
}

.announcement-bar__message {
color: {{ section.settings.color_text }};
}
</style>

{% if section.settings.message_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
{% endif %}

<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

{% if section.settings.message_link == blank %}
</div>
{% else %}
</a>
{% endif %}

{% endif %}
{% endif %}

<header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
<div class="grid grid--no-gutters grid--table site-header__mobile-nav">
{% if section.settings.align_logo == 'center' %}
{%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
{% else %}
{%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
{% endif %}

<div class="grid__item {{ logo_classes }}">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}
{% if request.page_type == 'index' %}
<h1 class="h2 site-header__logo">
{% else %}
<div class="h2 site-header__logo">
{% endif %}
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="max-width: {{ section.settings.logo_max_width }}px">
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
style="max-width: {{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>

{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist %}
</nav>
{% endif %}

<div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
<div class="site-header__icons-wrapper">

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>

{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
</a>
{% else %}
<a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
</a>
{% endif %}
{% endif %}

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>

{% unless linklists[section.settings.main_linklist] == blank %}
<button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
{% include 'icon-hamburger' %}
{% include 'icon-close' %}
</button>
{% endunless %}
</div>

</div>
</div>

<nav class="mobile-nav-wrapper medium-up--hide" role="navigation">
<ul id="MobileNav" class="mobile-nav">
{% for link in linklists[section.settings.main_linklist].links %}
{%- assign outerLoopIndex = forloop.index -%}

<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
{% if link.links != blank %}
{% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
<button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
<span class="mobile-nav__label">{{ link.title | escape }}</span>
<div class="mobile-nav__icon">
{% include 'icon-chevron-right' %}
</div>
</button>
<ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
<li class="visually-hidden" tabindex="-1" data-menu-title="2">
{{- link.title }} {{ 'layout.navigation.menu' | t -}}
</li>
<li class="mobile-nav__item border-bottom">
<div class="mobile-nav__table">
<div class="mobile-nav__table-cell mobile-nav__return">
<button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
{% include 'icon-chevron-left' %}
</button>
</div>
<span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent">
<span class="mobile-nav__label">{{ link.title | escape }}</span>
</span>
</div>
</li>

{% for childlink in link.links %}
<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
{% if childlink.links != blank %}
{% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
<button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
<div class="mobile-nav__icon">
{% include 'icon-chevron-right' %}
</div>
</button>
<ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
<li class="visually-hidden" tabindex="-1" data-menu-title="3">
{{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
</li>
<li class="mobile-nav__item border-bottom">
<div class="mobile-nav__table">
<div class="mobile-nav__table-cell mobile-nav__return">
<button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
{% include 'icon-chevron-left' %}
</button>
</div>
<a href="{{ root_url }}"
class="mobile-nav__sublist-link mobile-nav__sublist-header"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
</a>
</div>
</li>
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
<a href="{{ grandchildlink.url }}"
class="mobile-nav__sublist-link"
{% if grandchildlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
<a href="{{ childlink.url }}"
class="mobile-nav__sublist-link"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<a href="{{ link.url }}"
class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ link.title | escape }}</span>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</header>

{% if section.settings.align_logo == 'center' %}
<nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
</nav>
{% endif %}
</div>

 

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append:'x' %}
"logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_snapchat_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>

{% if request.page_type == 'index' %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% endif %}

{% schema %}
{
"name": {
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"hi": "हैडर",
"it": "Header",
"ja": "ヘッダー",
"ko": "머리글",
"ms": "Pengepala",
"nb": "Header",
"nl": "Koptekst",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "radio",
"id": "align_logo",
"label": {
"da": "Logojustering",
"de": "Logo-Ausrichtung",
"en": "Logo alignment",
"es": "Alineación de logotipo",
"fi": "Logon tasaus",
"fr": "Alignement du logo",
"hi": "लोगो संरेखण",
"it": "Allineamento logo",
"ja": "ロゴアラインメント",
"ko": "로고 정렬",
"ms": "Penjajaran logo",
"nb": "Logojustering",
"nl": "Logo-uitlijning",
"pt-BR": "Alinhamento do logotipo",
"pt-PT": "Alinhamento do logótipo",
"sv": "Logojustering",
"th": "การจัดวางโลโก้",
"zh-CN": "logo 对齐方式",
"zh-TW": "商標對齊"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"hi": "बाएँ",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"ms": "Kiri",
"nb": "Venstre",
"nl": "Links",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "center",
"label": {
"da": "Centreret",
"de": "Mittig",
"en": "Centered",
"es": "Centrada",
"fi": "Keskitetty",
"fr": "Centré",
"hi": "केंद्र",
"it": "Centrato",
"ja": "中央揃え",
"ko": "센터 맞추기",
"ms": "Ditengah",
"nb": "Sentrert",
"nl": "Gecentreerd",
"pt-BR": "Centralizado",
"pt-PT": "Centrado",
"sv": "Centrera",
"th": "ตรงกลาง",
"zh-CN": "居中",
"zh-TW": "置中"
}
}
]
},
{
"type": "image_picker",
"id": "logo",
"label": {
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logotipo",
"fi": "Logokuva",
"fr": "Image du logo",
"hi": "लोगो इमेज",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"ms": "Imej logo",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pt-BR": "Imagem do logotipo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"da": "Tilpasset logobredde",
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logotipo personalizado",
"fi": "Mukautetun logon leveys",
"fr": "Largeur personnalisée du logo",
"hi": "कस्टम लोगो की चौड़ाई",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタムする",
"ko": "사용자 지정 로고 폭",
"ms": "Lebar logo tersuai",
"nb": "Tilpasset logobredde",
"nl": "Aangepaste logo-breedte",
"pt-BR": "Largura do logotipo personalizado",
"pt-PT": "Largura de logótipo personalizada",
"sv": "Anpassad logotypsbredd",
"th": "ความกว้างของโลโก้แบบกำหนดเอง",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 250,
"step": 5,
"unit": {
"da": "px",
"de": "px",
"en": "px",
"es": "px",
"fi": "px",
"fr": "px",
"hi": "px",
"it": "px",
"ja": "px",
"ko": "px",
"ms": "px",
"nb": "px",
"nl": "px",
"pt-BR": "px",
"pt-PT": "px",
"sv": "px",
"th": "px",
"zh-CN": "px",
"zh-TW": "像素"
},
"default": 100
},
{
"type": "link_list",
"id": "main_linklist",
"label": {
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"hi": "मेनू",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"ms": "Menu",
"nb": "Meny",
"nl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"da": "Meddelelseslinje",
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"hi": "घोषणा बार",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"ms": "Bar pengumuman",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pt-BR": "Barra de anúncios",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "message",
"label": {
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"hi": "घोषणा डिखाएं",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"ms": "Tunjukkan pengumuman",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pt-BR": "Exibir anúncio",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"da": "Kun startside",
"de": "Nur Startseite",
"en": "Home page only",
"es": "Solo página de inicio",
"fi": "Vain kotisivu",
"fr": "Page d'accueil uniquement",
"hi": "केवल होमपेज",
"it": "Solo home page",
"ja": "ホームページのみ",
"ko": "홈페이지만",
"ms": "Halaman utama sahaja",
"nb": "Kun på startsiden",
"nl": "Alleen startpagina",
"pt-BR": "Apenas na página inicial",
"pt-PT": "Apenas a página inicial",
"sv": "Endast hemsida",
"th": "หน้าแรกเท่านั้น",
"zh-CN": "仅主页",
"zh-TW": "僅限首頁"
},
"default": true
},
{
"type": "text",
"id": "message_text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "Meddel noget her",
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fi": "Ilmoita jotakin tässä",
"fr": "Annoncez quelque chose ici",
"hi": "यहां कुछ घोषित करें",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"ko": "여기에 공지하십시오",
"ms": "Mengumumkan sesuatu di sini",
"nb": "Kunngjør noe her",
"nl": "Kondig hier iets aan",
"pt-BR": "Anuncie algo aqui",
"pt-PT": "Anunciar algo aqui",
"sv": "Meddela något här",
"th": "ประกาศข้อความที่นี่",
"zh-CN": "在此处进行公告",
"zh-TW": "在此公告資訊"
}
},
{
"type": "url",
"id": "message_link",
"label": {
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"hi": "लिंक",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"ms": "Pautan",
"nb": "Kobling",
"nl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"hi": "वैकल्पिक",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"ms": "Opsyenal",
"nb": "Valgfritt",
"nl": "Optioneel",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
},
{
"type": "color",
"id": "color_bg",
"label": {
"da": "Bjælke",
"de": "Zeile",
"en": "Bar",
"es": "Barra",
"fi": "Palkki",
"fr": "Barre",
"hi": "बार",
"it": "Barra",
"ja": "バー",
"ko": "바",
"ms": "Bar",
"nb": "Felt",
"nl": "Balk",
"pt-BR": "Barra",
"pt-PT": "Barra",
"sv": "Fält",
"th": "แถบ",
"zh-CN": "栏",
"zh-TW": "橫條"
},
"default": "#7796a8"
},
{
"type": "color",
"id": "color_text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": "#fff"
}
]
}
{% endschema %}

 

0 Likes
Highlighted
Tourist
9 0 1

{% if section.settings.message %}
<style>
{% if section.settings.logo != blank %}
.site-header__logo-image {
max-width: {{ section.settings.logo_max_width | escape }}px;
}
{% endif %}

{% if section.settings.align_logo == 'left' %}
.site-header__logo-image {
margin: 0;
}
{% endif %}
</style>
{% endif %}

{% include 'search-drawer' %}

<div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section>
{% if section.settings.message %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.color_bg }};
}

.announcement-bar--link:hover {
{% assign brightness = section.settings.color_bg | color_brightness %}

{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
{% endif %}
}

.announcement-bar__message {
color: {{ section.settings.color_text }};
}
</style>

{% if section.settings.message_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
{% endif %}

<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

{% if section.settings.message_link == blank %}
</div>
{% else %}
</a>
{% endif %}

{% endif %}
{% endif %}

<header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
<div class="grid grid--no-gutters grid--table site-header__mobile-nav">
{% if section.settings.align_logo == 'center' %}
{%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
{% else %}
{%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
{% endif %}

<div class="grid__item {{ logo_classes }}">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}
{% if request.page_type == 'index' %}
<h1 class="h2 site-header__logo">
{% else %}
<div class="h2 site-header__logo">
{% endif %}
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="max-width: {{ section.settings.logo_max_width }}px">
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
style="max-width: {{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>

{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist %}
</nav>
{% endif %}

<div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
<div class="site-header__icons-wrapper">

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>

{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
</a>
{% else %}
<a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
</a>
{% endif %}
{% endif %}

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>

{% unless linklists[section.settings.main_linklist] == blank %}
<button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
{% include 'icon-hamburger' %}
{% include 'icon-close' %}
</button>
{% endunless %}
</div>

</div>
</div>

<nav class="mobile-nav-wrapper medium-up--hide" role="navigation">
<ul id="MobileNav" class="mobile-nav">
{% for link in linklists[section.settings.main_linklist].links %}
{%- assign outerLoopIndex = forloop.index -%}

<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
{% if link.links != blank %}
{% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
<button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
<span class="mobile-nav__label">{{ link.title | escape }}</span>
<div class="mobile-nav__icon">
{% include 'icon-chevron-right' %}
</div>
</button>
<ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
<li class="visually-hidden" tabindex="-1" data-menu-title="2">
{{- link.title }} {{ 'layout.navigation.menu' | t -}}
</li>
<li class="mobile-nav__item border-bottom">
<div class="mobile-nav__table">
<div class="mobile-nav__table-cell mobile-nav__return">
<button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
{% include 'icon-chevron-left' %}
</button>
</div>
<span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent">
<span class="mobile-nav__label">{{ link.title | escape }}</span>
</span>
</div>
</li>

{% for childlink in link.links %}
<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
{% if childlink.links != blank %}
{% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
<button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
<div class="mobile-nav__icon">
{% include 'icon-chevron-right' %}
</div>
</button>
<ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
<li class="visually-hidden" tabindex="-1" data-menu-title="3">
{{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
</li>
<li class="mobile-nav__item border-bottom">
<div class="mobile-nav__table">
<div class="mobile-nav__table-cell mobile-nav__return">
<button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
{% include 'icon-chevron-left' %}
</button>
</div>
<a href="{{ root_url }}"
class="mobile-nav__sublist-link mobile-nav__sublist-header"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
</a>
</div>
</li>
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
<a href="{{ grandchildlink.url }}"
class="mobile-nav__sublist-link"
{% if grandchildlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
<a href="{{ childlink.url }}"
class="mobile-nav__sublist-link"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<a href="{{ link.url }}"
class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ link.title | escape }}</span>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</header>

{% if section.settings.align_logo == 'center' %}
<nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
</nav>
{% endif %}
</div>

 

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append:'x' %}
"logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_snapchat_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>

{% if request.page_type == 'index' %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% endif %}

{% schema %}
{
"name": {
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"hi": "हैडर",
"it": "Header",
"ja": "ヘッダー",
"ko": "머리글",
"ms": "Pengepala",
"nb": "Header",
"nl": "Koptekst",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "radio",
"id": "align_logo",
"label": {
"da": "Logojustering",
"de": "Logo-Ausrichtung",
"en": "Logo alignment",
"es": "Alineación de logotipo",
"fi": "Logon tasaus",
"fr": "Alignement du logo",
"hi": "लोगो संरेखण",
"it": "Allineamento logo",
"ja": "ロゴアラインメント",
"ko": "로고 정렬",
"ms": "Penjajaran logo",
"nb": "Logojustering",
"nl": "Logo-uitlijning",
"pt-BR": "Alinhamento do logotipo",
"pt-PT": "Alinhamento do logótipo",
"sv": "Logojustering",
"th": "การจัดวางโลโก้",
"zh-CN": "logo 对齐方式",
"zh-TW": "商標對齊"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"hi": "बाएँ",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"ms": "Kiri",
"nb": "Venstre",
"nl": "Links",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "center",
"label": {
"da": "Centreret",
"de": "Mittig",
"en": "Centered",
"es": "Centrada",
"fi": "Keskitetty",
"fr": "Centré",
"hi": "केंद्र",
"it": "Centrato",
"ja": "中央揃え",
"ko": "센터 맞추기",
"ms": "Ditengah",
"nb": "Sentrert",
"nl": "Gecentreerd",
"pt-BR": "Centralizado",
"pt-PT": "Centrado",
"sv": "Centrera",
"th": "ตรงกลาง",
"zh-CN": "居中",
"zh-TW": "置中"
}
}
]
},
{
"type": "image_picker",
"id": "logo",
"label": {
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logotipo",
"fi": "Logokuva",
"fr": "Image du logo",
"hi": "लोगो इमेज",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"ms": "Imej logo",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pt-BR": "Imagem do logotipo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"da": "Tilpasset logobredde",
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logotipo personalizado",
"fi": "Mukautetun logon leveys",
"fr": "Largeur personnalisée du logo",
"hi": "कस्टम लोगो की चौड़ाई",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタムする",
"ko": "사용자 지정 로고 폭",
"ms": "Lebar logo tersuai",
"nb": "Tilpasset logobredde",
"nl": "Aangepaste logo-breedte",
"pt-BR": "Largura do logotipo personalizado",
"pt-PT": "Largura de logótipo personalizada",
"sv": "Anpassad logotypsbredd",
"th": "ความกว้างของโลโก้แบบกำหนดเอง",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 250,
"step": 5,
"unit": {
"da": "px",
"de": "px",
"en": "px",
"es": "px",
"fi": "px",
"fr": "px",
"hi": "px",
"it": "px",
"ja": "px",
"ko": "px",
"ms": "px",
"nb": "px",
"nl": "px",
"pt-BR": "px",
"pt-PT": "px",
"sv": "px",
"th": "px",
"zh-CN": "px",
"zh-TW": "像素"
},
"default": 100
},
{
"type": "link_list",
"id": "main_linklist",
"label": {
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"hi": "मेनू",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"ms": "Menu",
"nb": "Meny",
"nl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"da": "Meddelelseslinje",
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"hi": "घोषणा बार",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"ms": "Bar pengumuman",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pt-BR": "Barra de anúncios",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "message",
"label": {
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"hi": "घोषणा डिखाएं",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"ms": "Tunjukkan pengumuman",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pt-BR": "Exibir anúncio",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"da": "Kun startside",
"de": "Nur Startseite",
"en": "Home page only",
"es": "Solo página de inicio",
"fi": "Vain kotisivu",
"fr": "Page d'accueil uniquement",
"hi": "केवल होमपेज",
"it": "Solo home page",
"ja": "ホームページのみ",
"ko": "홈페이지만",
"ms": "Halaman utama sahaja",
"nb": "Kun på startsiden",
"nl": "Alleen startpagina",
"pt-BR": "Apenas na página inicial",
"pt-PT": "Apenas a página inicial",
"sv": "Endast hemsida",
"th": "หน้าแรกเท่านั้น",
"zh-CN": "仅主页",
"zh-TW": "僅限首頁"
},
"default": true
},
{
"type": "text",
"id": "message_text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "Meddel noget her",
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fi": "Ilmoita jotakin tässä",
"fr": "Annoncez quelque chose ici",
"hi": "यहां कुछ घोषित करें",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"ko": "여기에 공지하십시오",
"ms": "Mengumumkan sesuatu di sini",
"nb": "Kunngjør noe her",
"nl": "Kondig hier iets aan",
"pt-BR": "Anuncie algo aqui",
"pt-PT": "Anunciar algo aqui",
"sv": "Meddela något här",
"th": "ประกาศข้อความที่นี่",
"zh-CN": "在此处进行公告",
"zh-TW": "在此公告資訊"
}
},
{
"type": "url",
"id": "message_link",
"label": {
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"hi": "लिंक",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"ms": "Pautan",
"nb": "Kobling",
"nl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"hi": "वैकल्पिक",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"ms": "Opsyenal",
"nb": "Valgfritt",
"nl": "Optioneel",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
},
{
"type": "color",
"id": "color_bg",
"label": {
"da": "Bjælke",
"de": "Zeile",
"en": "Bar",
"es": "Barra",
"fi": "Palkki",
"fr": "Barre",
"hi": "बार",
"it": "Barra",
"ja": "バー",
"ko": "바",
"ms": "Bar",
"nb": "Felt",
"nl": "Balk",
"pt-BR": "Barra",
"pt-PT": "Barra",
"sv": "Fält",
"th": "แถบ",
"zh-CN": "栏",
"zh-TW": "橫條"
},
"default": "#7796a8"
},
{
"type": "color",
"id": "color_text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": "#fff"
}
]
}
{% endschema %}

 

0 Likes
Highlighted
Tourist
9 0 1

please could you indicate me how to post it in a " clean way " ?

0 Likes
Highlighted
Trailblazer
192 33 53

Capturepost.JPG

 

After copying the file click the above icon and paste the code in it n click OK.

0 Likes
Highlighted
Tourist
9 0 1
{% if section.settings.message %}
  <style>
    {% if section.settings.logo != blank %}
      .site-header__logo-image {
        max-width: {{ section.settings.logo_max_width | escape }}px;
      }
    {% endif %}

    {% if section.settings.align_logo == 'left' %}
      .site-header__logo-image {
        margin: 0;
      }
    {% endif %}
  </style>
{% endif %}

{% include 'search-drawer' %}

<div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section>
  {% if section.settings.message %}
    {% if section.settings.home_page_only == false or request.page_type == 'index' %}
      <style>
        .announcement-bar {
          background-color: {{ section.settings.color_bg }};
        }

        .announcement-bar--link:hover {
          {% assign brightness = section.settings.color_bg | color_brightness %}

          {% if brightness <= 192 %}
            {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
            background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
          {% else %}
            {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
            background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
          {% endif %}
        }

        .announcement-bar__message {
          color: {{ section.settings.color_text }};
        }
      </style>

      {% if section.settings.message_link == blank %}
        <div class="announcement-bar">
      {% else %}
        <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
      {% endif %}

        <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

      {% if section.settings.message_link == blank %}
        </div>
      {% else %}
        </a>
      {% endif %}

    {% endif %}
  {% endif %}

  <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
    <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      {% if section.settings.align_logo == 'center' %}
        {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
      {% else %}
        {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
      {% endif %}

      <div class="grid__item {{ logo_classes }}">
        {% comment %}
          Use the uploaded logo from theme settings if enabled.
          Site name gets precedence with H1 tag on homepage, div on other pages.
        {% endcomment %}
        {% if request.page_type == 'index' %}
          <h1 class="h2 site-header__logo">
        {% else %}
          <div class="h2 site-header__logo">
        {% endif %}
          {% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      {% if section.settings.align_logo == 'left' %}
        <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
          {% include 'site-nav', linklist: section.settings.main_linklist %}
        </nav>
      {% endif %}

      <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
        <div class="site-header__icons-wrapper">

          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
              </a>
            {% else %}
              <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
              </a>
            {% endif %}
          {% endif %}

          <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>

          {% unless linklists[section.settings.main_linklist] == blank %}
            <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav"  aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
              {% include 'icon-hamburger' %}
              {% include 'icon-close' %}
            </button>
          {% endunless %}
        </div>

      </div>
    </div>

    <nav class="mobile-nav-wrapper medium-up--hide" role="navigation">
      <ul id="MobileNav" class="mobile-nav">
        {% for link in linklists[section.settings.main_linklist].links %}
          {%- assign outerLoopIndex = forloop.index -%}

          <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
            {% if link.links != blank %}
              {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
              <button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
                <span class="mobile-nav__label">{{ link.title | escape }}</span>
                <div class="mobile-nav__icon">
                  {% include 'icon-chevron-right' %}
                </div>
              </button>
              <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
                <li class="visually-hidden" tabindex="-1" data-menu-title="2">
                  {{- link.title }} {{ 'layout.navigation.menu' | t -}}
                </li>
                <li class="mobile-nav__item border-bottom">
                  <div class="mobile-nav__table">
                    <div class="mobile-nav__table-cell mobile-nav__return">
                      <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
                        {% include 'icon-chevron-left' %}
                      </button>
                    </div>
                    <span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent">
                      <span class="mobile-nav__label">{{ link.title | escape }}</span>
                    </span>
                  </div>
                </li>

                {% for childlink in link.links %}
                  <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                    {% if childlink.links != blank %}
                      {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
                      <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
                        <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                        <div class="mobile-nav__icon">
                          {% include 'icon-chevron-right' %}
                        </div>
                      </button>
                      <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
                        <li class="visually-hidden" tabindex="-1" data-menu-title="3">
                          {{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
                        </li>
                        <li class="mobile-nav__item border-bottom">
                          <div class="mobile-nav__table">
                            <div class="mobile-nav__table-cell mobile-nav__return">
                              <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
                                {% include 'icon-chevron-left' %}
                              </button>
                            </div>
                            <a href="{{ root_url }}"
                              class="mobile-nav__sublist-link mobile-nav__sublist-header"
                              {% if childlink.current %} aria-current="page"{% endif %}
                            >
                              <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                            </a>
                          </div>
                        </li>
                        {% for grandchildlink in childlink.links %}
                          <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                            <a href="{{ grandchildlink.url }}"
                              class="mobile-nav__sublist-link"
                              {% if grandchildlink.current %} aria-current="page"{% endif %}
                            >
                              <span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                        {% endfor %}
                      </ul>
                    {% else %}
                      <a href="{{ childlink.url }}"
                        class="mobile-nav__sublist-link"
                        {% if childlink.current %} aria-current="page"{% endif %}
                      >
                        <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                      </a>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <a href="{{ link.url }}"
                class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}"
                {% if link.current %} aria-current="page"{% endif %}
              >
                <span class="mobile-nav__label">{{ link.title | escape }}</span>
              </a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </nav>
  </header>

  {% if section.settings.align_logo == 'center' %}
  <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
    {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
  </nav>
  {% endif %}
</div>



<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": {{ shop.name | json }},
  {% if section.settings.logo %}
    {% assign image_size = section.settings.logo.width | append:'x' %}
    "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
  {% endif %}
  "sameAs": [
    {{ settings.social_twitter_link | json }},
    {{ settings.social_facebook_link | json }},
    {{ settings.social_pinterest_link | json }},
    {{ settings.social_instagram_link | json }},
    {{ settings.social_tumblr_link | json }},
    {{ settings.social_snapchat_link | json }},
    {{ settings.social_youtube_link | json }},
    {{ settings.social_vimeo_link | json }}
  ],
  "url": {{ shop.url | append: page.url | json }}
}
</script>

{% if request.page_type == 'index' %}
  {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": {{ shop.name | json }},
      "potentialAction": {
        "@type": "SearchAction",
        "target": {{ potential_action_target | json }},
        "query-input": "required name=search_term_string"
      },
      "url": {{ shop.url | append: page.url | json }}
    }
  </script>
{% endif %}

{% schema %}
{
  "name": {
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "hi": "हैडर",
    "it": "Header",
    "ja": "ヘッダー",
    "ko": "머리글",
    "ms": "Pengepala",
    "nb": "Header",
    "nl": "Koptekst",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
  "settings": [
    {
      "type": "radio",
      "id": "align_logo",
      "label": {
        "da": "Logojustering",
        "de": "Logo-Ausrichtung",
        "en": "Logo alignment",
        "es": "Alineación de logotipo",
        "fi": "Logon tasaus",
        "fr": "Alignement du logo",
        "hi": "लोगो संरेखण",
        "it": "Allineamento logo",
        "ja": "ロゴアラインメント",
        "ko": "로고 정렬",
        "ms": "Penjajaran logo",
        "nb": "Logojustering",
        "nl": "Logo-uitlijning",
        "pt-BR": "Alinhamento do logotipo",
        "pt-PT": "Alinhamento do logótipo",
        "sv": "Logojustering",
        "th": "การจัดวางโลโก้",
        "zh-CN": "logo 对齐方式",
        "zh-TW": "商標對齊"
      },
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": {
            "da": "Venstre",
            "de": "Links",
            "en": "Left",
            "es": "Izquierda",
            "fi": "Vasen",
            "fr": "Gauche",
            "hi": "बाएँ",
            "it": "Sinistra",
            "ja": "左",
            "ko": "왼쪽",
            "ms": "Kiri",
            "nb": "Venstre",
            "nl": "Links",
            "pt-BR": "Esquerda",
            "pt-PT": "Esquerda",
            "sv": "Vänster",
            "th": "ด้านซ้าย",
            "zh-CN": "左侧",
            "zh-TW": "左方"
          }
        },
        {
          "value": "center",
          "label": {
            "da": "Centreret",
            "de": "Mittig",
            "en": "Centered",
            "es": "Centrada",
            "fi": "Keskitetty",
            "fr": "Centré",
            "hi": "केंद्र",
            "it": "Centrato",
            "ja": "中央揃え",
            "ko": "센터 맞추기",
            "ms": "Ditengah",
            "nb": "Sentrert",
            "nl": "Gecentreerd",
            "pt-BR": "Centralizado",
            "pt-PT": "Centrado",
            "sv": "Centrera",
            "th": "ตรงกลาง",
            "zh-CN": "居中",
            "zh-TW": "置中"
          }
        }
      ]
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": {
        "da": "Logobillede",
        "de": "Logo-Foto",
        "en": "Logo image",
        "es": "Logotipo",
        "fi": "Logokuva",
        "fr": "Image du logo",
        "hi": "लोगो इमेज",
        "it": "Immagine del logo",
        "ja": "ロゴ画像",
        "ko": "로고 이미지",
        "ms": "Imej logo",
        "nb": "Logobilde",
        "nl": "Afbeelding van logo",
        "pt-BR": "Imagem do logotipo",
        "pt-PT": "Imagem do logótipo",
        "sv": "Logobild",
        "th": "รูปภาพโลโก้",
        "zh-CN": "logo 图片",
        "zh-TW": "標誌圖片"
      }
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "label": {
        "da": "Tilpasset logobredde",
        "de": "Logobreite",
        "en": "Custom logo width",
        "es": "Ancho del logotipo personalizado",
        "fi": "Mukautetun logon leveys",
        "fr": "Largeur personnalisée du logo",
        "hi": "कस्टम लोगो की चौड़ाई",
        "it": "Larghezza logo personalizzato",
        "ja": "ロゴの幅をカスタムする",
        "ko": "사용자 지정 로고 폭",
        "ms": "Lebar logo tersuai",
        "nb": "Tilpasset logobredde",
        "nl": "Aangepaste logo-breedte",
        "pt-BR": "Largura do logotipo personalizado",
        "pt-PT": "Largura de logótipo personalizada",
        "sv": "Anpassad logotypsbredd",
        "th": "ความกว้างของโลโก้แบบกำหนดเอง",
        "zh-CN": "自定义 logo 宽度",
        "zh-TW": "自訂商標寬度"
      },
      "min": 50,
      "max": 250,
      "step": 5,
      "unit": {
        "da": "px",
        "de": "px",
        "en": "px",
        "es": "px",
        "fi": "px",
        "fr": "px",
        "hi": "px",
        "it": "px",
        "ja": "px",
        "ko": "px",
        "ms": "px",
        "nb": "px",
        "nl": "px",
        "pt-BR": "px",
        "pt-PT": "px",
        "sv": "px",
        "th": "px",
        "zh-CN": "px",
        "zh-TW": "像素"
      },
      "default": 100
    },
    {
      "type": "link_list",
      "id": "main_linklist",
      "label": {
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "hi": "मेनू",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "ms": "Menu",
        "nb": "Meny",
        "nl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": {
        "da": "Meddelelseslinje",
        "de": "Ankündigungsbereich",
        "en": "Announcement bar",
        "es": "Barra de anuncios",
        "fi": "Ilmoituspalkki",
        "fr": "Barre d'annonces",
        "hi": "घोषणा बार",
        "it": "Barra degli annunci",
        "ja": "告知バー",
        "ko": "공지 표시줄",
        "ms": "Bar pengumuman",
        "nb": "Kunngjøringslinje",
        "nl": "Aankondigingsbalk",
        "pt-BR": "Barra de anúncios",
        "pt-PT": "Barra de comunicado",
        "sv": "Meddelandefält",
        "th": "แถบประกาศ",
        "zh-CN": "公告栏",
        "zh-TW": "公告列"
      }
    },
    {
      "type": "checkbox",
      "id": "message",
      "label": {
        "da": "Vis meddelelse",
        "de": "Ankündigung anzeigen",
        "en": "Show announcement",
        "es": "Mostrar anuncio",
        "fi": "Näytä ilmoitus",
        "fr": "Afficher l'annonce",
        "hi": "घोषणा डिखाएं",
        "it": "Mostra annuncio",
        "ja": "告知を表示する",
        "ko": "공지 표시",
        "ms": "Tunjukkan pengumuman",
        "nb": "Vis kunngjøring",
        "nl": "Aankondiging weergeven",
        "pt-BR": "Exibir anúncio",
        "pt-PT": "Mostrar comunicado",
        "sv": "Visa tillkännagivande",
        "th": "แสดงประกาศ",
        "zh-CN": "显示公告",
        "zh-TW": "顯示公告"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": {
        "da": "Kun startside",
        "de": "Nur Startseite",
        "en": "Home page only",
        "es": "Solo página de inicio",
        "fi": "Vain kotisivu",
        "fr": "Page d'accueil uniquement",
        "hi": "केवल होमपेज",
        "it": "Solo home page",
        "ja": "ホームページのみ",
        "ko": "홈페이지만",
        "ms": "Halaman utama sahaja",
        "nb": "Kun på startsiden",
        "nl": "Alleen startpagina",
        "pt-BR": "Apenas na página inicial",
        "pt-PT": "Apenas a página inicial",
        "sv": "Endast hemsida",
        "th": "หน้าแรกเท่านั้น",
        "zh-CN": "仅主页",
        "zh-TW": "僅限首頁"
      },
      "default": true
    },
    {
      "type": "text",
      "id": "message_text",
      "label": {
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "ms": "Teks",
        "nb": "Tekst",
        "nl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": {
        "da": "Meddel noget her",
        "de": "Hier etwas ankündigen",
        "en": "Announce something here",
        "es": "Anuncia algo aquí",
        "fi": "Ilmoita jotakin tässä",
        "fr": "Annoncez quelque chose ici",
        "hi": "यहां कुछ घोषित करें",
        "it": "Annuncia qualcosa qui",
        "ja": "ここで告知してください",
        "ko": "여기에 공지하십시오",
        "ms": "Mengumumkan sesuatu di sini",
        "nb": "Kunngjør noe her",
        "nl": "Kondig hier iets aan",
        "pt-BR": "Anuncie algo aqui",
        "pt-PT": "Anunciar algo aqui",
        "sv": "Meddela något här",
        "th": "ประกาศข้อความที่นี่",
        "zh-CN": "在此处进行公告",
        "zh-TW": "在此公告資訊"
      }
    },
    {
      "type": "url",
      "id": "message_link",
      "label": {
        "da": "Link",
        "de": "Link",
        "en": "Link",
        "es": "Enlace",
        "fi": "Linkki",
        "fr": "Lien",
        "hi": "लिंक",
        "it": "Link",
        "ja": "リンク",
        "ko": "링크",
        "ms": "Pautan",
        "nb": "Kobling",
        "nl": "Link",
        "pt-BR": "Link",
        "pt-PT": "Ligação",
        "sv": "Länk",
        "th": "ลิงก์",
        "zh-CN": "链接",
        "zh-TW": "連結"
      },
      "info": {
        "da": "Valgfri",
        "de": "Optional",
        "en": "Optional",
        "es": "Opcional",
        "fi": "Valinnainen",
        "fr": "Facultatif",
        "hi": "वैकल्पिक",
        "it": "Facoltativo",
        "ja": "オプション",
        "ko": "선택 사항",
        "ms": "Opsyenal",
        "nb": "Valgfritt",
        "nl": "Optioneel",
        "pt-BR": "Opcional",
        "pt-PT": "Opcional",
        "sv": "Valfritt",
        "th": "ไม่จำเป็น",
        "zh-CN": "可选",
        "zh-TW": "(選填)"
      }
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": {
        "da": "Bjælke",
        "de": "Zeile",
        "en": "Bar",
        "es": "Barra",
        "fi": "Palkki",
        "fr": "Barre",
        "hi": "बार",
        "it": "Barra",
        "ja": "バー",
        "ko": "바",
        "ms": "Bar",
        "nb": "Felt",
        "nl": "Balk",
        "pt-BR": "Barra",
        "pt-PT": "Barra",
        "sv": "Fält",
        "th": "แถบ",
        "zh-CN": "栏",
        "zh-TW": "橫條"
      },
      "default": "#7796a8"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "ms": "Teks",
        "nb": "Tekst",
        "nl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": "#fff"
    }
  ]
}
{% endschema %}
0 Likes
Highlighted
Trailblazer
192 33 53

This is an accepted solution.

{% if section.settings.message %}
  <style>
    {% if section.settings.logo != blank %}
      .site-header__logo-image {
        max-width: {{ section.settings.logo_max_width | escape }}px;
      }
    {% endif %}

    {% if section.settings.align_logo == 'left' %}
      .site-header__logo-image {
        margin: 0;
      }
    {% endif %}
  </style>
{% endif %}

{% include 'search-drawer' %}

<div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section>
  {% if section.settings.message %}
    {% if section.settings.home_page_only == false or request.page_type == 'index' %}
      <style>
        .announcement-bar {
          background-color: {{ section.settings.color_bg }};
        }

        .announcement-bar--link:hover {
          {% assign brightness = section.settings.color_bg | color_brightness %}

          {% if brightness <= 192 %}
            {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
            background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
          {% else %}
            {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
            background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
          {% endif %}
        }

        .announcement-bar__message {
          color: {{ section.settings.color_text }};
        }
      </style>

      {% if section.settings.message_link == blank %}
        <div class="announcement-bar">
      {% else %}
        <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
      {% endif %}

        <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

      {% if section.settings.message_link == blank %}
        </div>
      {% else %}
        </a>
      {% endif %}

    {% endif %}
  {% endif %}

  <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
    <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      {% if section.settings.align_logo == 'center' %}
        {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
      {% else %}
        {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
      {% endif %}

{% unless linklists[section.settings.main_linklist] == blank %}
<button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
{% include 'icon-hamburger' %}
{% include 'icon-close' %}
</button>
{% endunless %}
<div class="grid__item {{ logo_classes }}"> {% comment %} Use the uploaded logo from theme settings if enabled. Site name gets precedence with H1 tag on homepage, div on other pages. {% endcomment %} {% if request.page_type == 'index' %} <h1 class="h2 site-header__logo"> {% else %} <div class="h2 site-header__logo"> {% endif %} {% if section.settings.logo %} {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}"> {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %} <img class="lazyload js" src="{{ section.settings.logo | img_url: '300x300' }}" data-src="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ section.settings.logo.aspect_ratio }}" data-sizes="auto" alt="{{ logo_alt | escape }}" style="max-width: {{ section.settings.logo_max_width }}px"> <noscript> {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %} <img src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" style="max-width: {{ section.settings.logo_max_width }}px;"> </noscript> </a> {% else %} <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a> {% endif %} {% if request.page_type == 'index' %} </h1> {% else %} </div> {% endif %} </div> {% if section.settings.align_logo == 'left' %} <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation"> {% include 'site-nav', linklist: section.settings.main_linklist %} </nav> {% endif %} <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}"> <div class="site-header__icons-wrapper"> <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top"> {% include 'icon-search' %} <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span> </button> {% if shop.customer_accounts_enabled %} {% if customer %} <a href="{{ routes.account_url }}" class="site-header__icon site-header__account"> {% include 'icon-login' %} <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span> </a> {% else %} <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account"> {% include 'icon-login' %} <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span> </a> {% endif %} {% endif %} <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart"> {% include 'icon-cart' %} <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span> <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble> <span data-cart-count>{{ cart.item_count }}</span> <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span> </div> </a> </div> </div> </div> <nav class="mobile-nav-wrapper medium-up--hide" role="navigation"> <ul id="MobileNav" class="mobile-nav"> {% for link in linklists[section.settings.main_linklist].links %} {%- assign outerLoopIndex = forloop.index -%} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> {% if link.links != blank %} {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %} <button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false"> <span class="mobile-nav__label">{{ link.title | escape }}</span> <div class="mobile-nav__icon"> {% include 'icon-chevron-right' %} </div> </button> <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2"> <li class="visually-hidden" tabindex="-1" data-menu-title="2"> {{- link.title }} {{ 'layout.navigation.menu' | t -}} </li> <li class="mobile-nav__item border-bottom"> <div class="mobile-nav__table"> <div class="mobile-nav__table-cell mobile-nav__return"> <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}"> {% include 'icon-chevron-left' %} </button> </div> <span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent"> <span class="mobile-nav__label">{{ link.title | escape }}</span> </span> </div> </li> {% for childlink in link.links %} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> {% if childlink.links != blank %} {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %} <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false"> <span class="mobile-nav__label">{{ childlink.title | escape }}</span> <div class="mobile-nav__icon"> {% include 'icon-chevron-right' %} </div> </button> <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3"> <li class="visually-hidden" tabindex="-1" data-menu-title="3"> {{- childlink.title }} {{ 'layout.navigation.menu' | t -}} </li> <li class="mobile-nav__item border-bottom"> <div class="mobile-nav__table"> <div class="mobile-nav__table-cell mobile-nav__return"> <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}"> {% include 'icon-chevron-left' %} </button> </div> <a href="{{ root_url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header" {% if childlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ childlink.title | escape }}</span> </a> </div> </li> {% for grandchildlink in childlink.links %} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> <a href="{{ grandchildlink.url }}" class="mobile-nav__sublist-link" {% if grandchildlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span> </a> </li> {% endfor %} </ul> {% else %} <a href="{{ childlink.url }}" class="mobile-nav__sublist-link" {% if childlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ childlink.title | escape }}</span> </a> {% endif %} </li> {% endfor %} </ul> {% else %} <a href="{{ link.url }}" class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}" {% if link.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ link.title | escape }}</span> </a> {% endif %} </li> {% endfor %} </ul> </nav> </header> {% if section.settings.align_logo == 'center' %} <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation"> {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %} </nav> {% endif %} </div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": {{ shop.name | json }}, {% if section.settings.logo %} {% assign image_size = section.settings.logo.width | append:'x' %} "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }}, {% endif %} "sameAs": [ {{ settings.social_twitter_link | json }}, {{ settings.social_facebook_link | json }}, {{ settings.social_pinterest_link | json }}, {{ settings.social_instagram_link | json }}, {{ settings.social_tumblr_link | json }}, {{ settings.social_snapchat_link | json }}, {{ settings.social_youtube_link | json }}, {{ settings.social_vimeo_link | json }} ], "url": {{ shop.url | append: page.url | json }} } </script> {% if request.page_type == 'index' %} {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": {{ shop.name | json }}, "potentialAction": { "@type": "SearchAction", "target": {{ potential_action_target | json }}, "query-input": "required name=search_term_string" }, "url": {{ shop.url | append: page.url | json }} } </script> {% endif %} {% schema %} { "name": { "da": "Overskrift", "de": "Titel", "en": "Header", "es": "Encabezado", "fi": "Ylätunniste", "fr": "En-tête", "hi": "हैडर", "it": "Header", "ja": "ヘッダー", "ko": "머리글", "ms": "Pengepala", "nb": "Header", "nl": "Koptekst", "pt-BR": "Cabeçalho", "pt-PT": "Cabeçalho", "sv": "Rubrik", "th": "ส่วนหัว", "zh-CN": "标头", "zh-TW": "標頭" }, "settings": [ { "type": "radio", "id": "align_logo", "label": { "da": "Logojustering", "de": "Logo-Ausrichtung", "en": "Logo alignment", "es": "Alineación de logotipo", "fi": "Logon tasaus", "fr": "Alignement du logo", "hi": "लोगो संरेखण", "it": "Allineamento logo", "ja": "ロゴアラインメント", "ko": "로고 정렬", "ms": "Penjajaran logo", "nb": "Logojustering", "nl": "Logo-uitlijning", "pt-BR": "Alinhamento do logotipo", "pt-PT": "Alinhamento do logótipo", "sv": "Logojustering", "th": "การจัดวางโลโก้", "zh-CN": "logo 对齐方式", "zh-TW": "商標對齊" }, "default": "left", "options": [ { "value": "left", "label": { "da": "Venstre", "de": "Links", "en": "Left", "es": "Izquierda", "fi": "Vasen", "fr": "Gauche", "hi": "बाएँ", "it": "Sinistra", "ja": "左", "ko": "왼쪽", "ms": "Kiri", "nb": "Venstre", "nl": "Links", "pt-BR": "Esquerda", "pt-PT": "Esquerda", "sv": "Vänster", "th": "ด้านซ้าย", "zh-CN": "左侧", "zh-TW": "左方" } }, { "value": "center", "label": { "da": "Centreret", "de": "Mittig", "en": "Centered", "es": "Centrada", "fi": "Keskitetty", "fr": "Centré", "hi": "केंद्र", "it": "Centrato", "ja": "中央揃え", "ko": "센터 맞추기", "ms": "Ditengah", "nb": "Sentrert", "nl": "Gecentreerd", "pt-BR": "Centralizado", "pt-PT": "Centrado", "sv": "Centrera", "th": "ตรงกลาง", "zh-CN": "居中", "zh-TW": "置中" } } ] }, { "type": "image_picker", "id": "logo", "label": { "da": "Logobillede", "de": "Logo-Foto", "en": "Logo image", "es": "Logotipo", "fi": "Logokuva", "fr": "Image du logo", "hi": "लोगो इमेज", "it": "Immagine del logo", "ja": "ロゴ画像", "ko": "로고 이미지", "ms": "Imej logo", "nb": "Logobilde", "nl": "Afbeelding van logo", "pt-BR": "Imagem do logotipo", "pt-PT": "Imagem do logótipo", "sv": "Logobild", "th": "รูปภาพโลโก้", "zh-CN": "logo 图片", "zh-TW": "標誌圖片" } }, { "type": "range", "id": "logo_max_width", "label": { "da": "Tilpasset logobredde", "de": "Logobreite", "en": "Custom logo width", "es": "Ancho del logotipo personalizado", "fi": "Mukautetun logon leveys", "fr": "Largeur personnalisée du logo", "hi": "कस्टम लोगो की चौड़ाई", "it": "Larghezza logo personalizzato", "ja": "ロゴの幅をカスタムする", "ko": "사용자 지정 로고 폭", "ms": "Lebar logo tersuai", "nb": "Tilpasset logobredde", "nl": "Aangepaste logo-breedte", "pt-BR": "Largura do logotipo personalizado", "pt-PT": "Largura de logótipo personalizada", "sv": "Anpassad logotypsbredd", "th": "ความกว้างของโลโก้แบบกำหนดเอง", "zh-CN": "自定义 logo 宽度", "zh-TW": "自訂商標寬度" }, "min": 50, "max": 250, "step": 5, "unit": { "da": "px", "de": "px", "en": "px", "es": "px", "fi": "px", "fr": "px", "hi": "px", "it": "px", "ja": "px", "ko": "px", "ms": "px", "nb": "px", "nl": "px", "pt-BR": "px", "pt-PT": "px", "sv": "px", "th": "px", "zh-CN": "px", "zh-TW": "像素" }, "default": 100 }, { "type": "link_list", "id": "main_linklist", "label": { "da": "Menu", "de": "Menü", "en": "Menu", "es": "Menú", "fi": "Valikko", "fr": "Menu", "hi": "मेनू", "it": "Menu", "ja": "メニュー", "ko": "메뉴", "ms": "Menu", "nb": "Meny", "nl": "Menu", "pt-BR": "Menu", "pt-PT": "Menu", "sv": "Meny", "th": "เมนู", "zh-CN": "菜单", "zh-TW": "選單" }, "default": "main-menu" }, { "type": "header", "content": { "da": "Meddelelseslinje", "de": "Ankündigungsbereich", "en": "Announcement bar", "es": "Barra de anuncios", "fi": "Ilmoituspalkki", "fr": "Barre d'annonces", "hi": "घोषणा बार", "it": "Barra degli annunci", "ja": "告知バー", "ko": "공지 표시줄", "ms": "Bar pengumuman", "nb": "Kunngjøringslinje", "nl": "Aankondigingsbalk", "pt-BR": "Barra de anúncios", "pt-PT": "Barra de comunicado", "sv": "Meddelandefält", "th": "แถบประกาศ", "zh-CN": "公告栏", "zh-TW": "公告列" } }, { "type": "checkbox", "id": "message", "label": { "da": "Vis meddelelse", "de": "Ankündigung anzeigen", "en": "Show announcement", "es": "Mostrar anuncio", "fi": "Näytä ilmoitus", "fr": "Afficher l'annonce", "hi": "घोषणा डिखाएं", "it": "Mostra annuncio", "ja": "告知を表示する", "ko": "공지 표시", "ms": "Tunjukkan pengumuman", "nb": "Vis kunngjøring", "nl": "Aankondiging weergeven", "pt-BR": "Exibir anúncio", "pt-PT": "Mostrar comunicado", "sv": "Visa tillkännagivande", "th": "แสดงประกาศ", "zh-CN": "显示公告", "zh-TW": "顯示公告" }, "default": false }, { "type": "checkbox", "id": "home_page_only", "label": { "da": "Kun startside", "de": "Nur Startseite", "en": "Home page only", "es": "Solo página de inicio", "fi": "Vain kotisivu", "fr": "Page d'accueil uniquement", "hi": "केवल होमपेज", "it": "Solo home page", "ja": "ホームページのみ", "ko": "홈페이지만", "ms": "Halaman utama sahaja", "nb": "Kun på startsiden", "nl": "Alleen startpagina", "pt-BR": "Apenas na página inicial", "pt-PT": "Apenas a página inicial", "sv": "Endast hemsida", "th": "หน้าแรกเท่านั้น", "zh-CN": "仅主页", "zh-TW": "僅限首頁" }, "default": true }, { "type": "text", "id": "message_text", "label": { "da": "Tekst", "de": "Text", "en": "Text", "es": "Texto", "fi": "Teksti", "fr": "Texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "ms": "Teks", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" }, "default": { "da": "Meddel noget her", "de": "Hier etwas ankündigen", "en": "Announce something here", "es": "Anuncia algo aquí", "fi": "Ilmoita jotakin tässä", "fr": "Annoncez quelque chose ici", "hi": "यहां कुछ घोषित करें", "it": "Annuncia qualcosa qui", "ja": "ここで告知してください", "ko": "여기에 공지하십시오", "ms": "Mengumumkan sesuatu di sini", "nb": "Kunngjør noe her", "nl": "Kondig hier iets aan", "pt-BR": "Anuncie algo aqui", "pt-PT": "Anunciar algo aqui", "sv": "Meddela något här", "th": "ประกาศข้อความที่นี่", "zh-CN": "在此处进行公告", "zh-TW": "在此公告資訊" } }, { "type": "url", "id": "message_link", "label": { "da": "Link", "de": "Link", "en": "Link", "es": "Enlace", "fi": "Linkki", "fr": "Lien", "hi": "लिंक", "it": "Link", "ja": "リンク", "ko": "링크", "ms": "Pautan", "nb": "Kobling", "nl": "Link", "pt-BR": "Link", "pt-PT": "Ligação", "sv": "Länk", "th": "ลิงก์", "zh-CN": "链接", "zh-TW": "連結" }, "info": { "da": "Valgfri", "de": "Optional", "en": "Optional", "es": "Opcional", "fi": "Valinnainen", "fr": "Facultatif", "hi": "वैकल्पिक", "it": "Facoltativo", "ja": "オプション", "ko": "선택 사항", "ms": "Opsyenal", "nb": "Valgfritt", "nl": "Optioneel", "pt-BR": "Opcional", "pt-PT": "Opcional", "sv": "Valfritt", "th": "ไม่จำเป็น", "zh-CN": "可选", "zh-TW": "(選填)" } }, { "type": "color", "id": "color_bg", "label": { "da": "Bjælke", "de": "Zeile", "en": "Bar", "es": "Barra", "fi": "Palkki", "fr": "Barre", "hi": "बार", "it": "Barra", "ja": "バー", "ko": "바", "ms": "Bar", "nb": "Felt", "nl": "Balk", "pt-BR": "Barra", "pt-PT": "Barra", "sv": "Fält", "th": "แถบ", "zh-CN": "栏", "zh-TW": "橫條" }, "default": "#7796a8" }, { "type": "color", "id": "color_text", "label": { "da": "Tekst", "de": "Text", "en": "Text", "es": "Texto", "fi": "Teksti", "fr": "Texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "ms": "Teks", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" }, "default": "#fff" } ] } {% endschema %}
2 Likes
Highlighted
Trailblazer
192 33 53

You can copy the above code n replace your header.liquid file in whole.

 

Any issue can come back here.

1 Like
Highlighted
Tourist
9 0 1

damn you're a monster !

 

thank you mate, I looked for solutions to this problem for 2 hours on internet, never find a satisfying way to solve it. 

I guess now I have to find the "7 differences"  to understand what I needed to change haha. But thats your magic, Its fair.

 

thank you very much, you were very helpful.

have a nice day

 

 

0 Likes