FROM CACHE - en_header

【Debut theme】I want to display a hamburger menu with a screen size larger than 750px

k371573
Shopify Partner
9 2 1

Dear Sir or Madam,

I'm making my site using the free theme of "debut"
https://themes.shopify.com/themes/debut/styles/default

I have the problem that it says "mobile menu breakpoint".

By default, I seems that mobile menus appear when viewing the site smaller than 750px.
I'd like to change the breakpoint so that the only mobile menu appears when viewing the site smaller than 1200px.

I searched some articles on the Shopify Community. But I couldn't get to the answer.

Such as...

https://community.shopify.com/c/Shopify-Design/Change-breakpoint-for-tablets-in-Debut-Theme/m-p/2968...

https://community.shopify.com/c/Shopify-Design/Change-MobileNav-breakpoint-for-Debut-theme/td-p/5224...

What can we do to resolve this?
I look forward to your reply.

Replies 25 (25)
Lawrence7
Explorer
57 0 14

Hello please I'm also in search of the same solution, if you found a way to achieve this please share how you did iy. Thanks

 

Slava_Maksimov
Shopify Partner
34 5 12

This is not done with a single click:) You need to edit the style file with a template for the header.

shopify, javascript
Lawrence7
Explorer
57 0 14

Thank you Slavamak for your response, can you help with the code I need to edit the style file and the header please?

Slava_Maksimov
Shopify Partner
34 5 12

If you feel you can do it. In short, you need to add new variables for the width of 1200px in the theme.css.liquid file. see the screenshots.

https://prnt.sc/ugo3v4

https://prnt.sc/ugo4ed

https://prnt.sc/ugocym

Next, you need to change the classes "medium-up" to "xlarge" and "small" to "xlarge-down" in the header.liquid file, see the screenshots.

https://prnt.sc/ugogcu

https://prnt.sc/ugogtu

https://prnt.sc/ugohzd

https://prnt.sc/ugoi7m

 

shopify, javascript
Lawrence7
Explorer
57 0 14

Hi Slavamak thank you very much for going through the stress to help me out, I really do appreciate you

But what I am really trying to achieve is to make "hamburger menu" display on desktop, as I already got it to work on "tablet" but can't figure how to go about it on desktop, been trying for couple of days now

Will this "edit" you post help me achieve that? Thank you very much once again I very much appreciate.

Slava_Maksimov
Shopify Partner
34 5 12

Do you want to always have a hamburger menu? On mobile, tablet and desktop

shopify, javascript
Lawrence7
Explorer
57 0 14
Slava_Maksimov
Shopify Partner
34 5 12

You need to comment out a few lines in theme.css. And also change the classes in header.liquid. If you are talking about the standard theme Debut without changes, you can just copy this code and paste it to yourself header.liquid file . I'm use latest version

https://prnt.sc/ugpaxi

https://prnt.sc/ugpb8v

Click to expand...
{% 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>

      <div class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement_bar_label' | t }}">
        {%- unless section.settings.message_link == blank -%}
          <a href="{{ section.settings.message_link }}" class="announcement-bar__link">
        {%- endunless -%}
            <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
        {%- unless section.settings.message_link == blank -%}
          </a>
        {%- endunless -%}
      </div>

    {% 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 = 'one-third push-one-third logo-align--center' -%}
      {% else %}
        {%- assign logo_classes = 'one-half 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 %}" data-image-loading-animation>
              {% 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 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' %}one-half{% else %}one-third 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" data-predictive-search-open-drawer>
            {% 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 %} critical-hidden" 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 critical-hidden" 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="{{ childlink.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="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": {
    "cs": "Záhlaví",
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "hi": "हैडर",
    "it": "Header",
    "ja": "ヘッダー",
    "ko": "헤더",
    "nb": "Header",
    "nl": "Koptekst",
    "pl": "Nagłówek",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "tr": "Üstbilgi",
    "vi": "Đầu trang",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
  "settings": [
    {
      "type": "radio",
      "id": "align_logo",
      "label": {
        "cs": "Zarovnání loga",
        "da": "Logojustering",
        "de": "Logo-Ausrichtung",
        "en": "Logo alignment",
        "es": "Alineación de logo",
        "fi": "Logon tasaus",
        "fr": "Alignement du logo",
        "hi": "लोगो संरेखण",
        "it": "Allineamento logo",
        "ja": "ロゴアラインメント",
        "ko": "로고 정렬",
        "nb": "Logojustering",
        "nl": "Logo-uitlijning",
        "pl": "Wyrównanie logo",
        "pt-BR": "Alinhamento do logotipo",
        "pt-PT": "Alinhamento do logótipo",
        "sv": "Logojustering",
        "th": "การจัดวางโลโก้",
        "tr": "Logo hizalaması",
        "vi": "Căn chỉnh logo",
        "zh-CN": "logo 对齐方式",
        "zh-TW": "商標對齊"
      },
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": {
            "cs": "Doleva",
            "da": "Venstre",
            "de": "Links",
            "en": "Left",
            "es": "Izquierda",
            "fi": "Vasen",
            "fr": "Gauche",
            "hi": "बाएँ",
            "it": "Sinistra",
            "ja": "左",
            "ko": "왼쪽",
            "nb": "Venstre",
            "nl": "Links",
            "pl": "Do lewej",
            "pt-BR": "Esquerda",
            "pt-PT": "Esquerda",
            "sv": "Vänster",
            "th": "ด้านซ้าย",
            "tr": "Sol",
            "vi": "Bên trái",
            "zh-CN": "左侧",
            "zh-TW": "左方"
          }
        },
        {
          "value": "center",
          "label": {
            "cs": "Na střed",
            "da": "Centreret",
            "de": "Mittig",
            "en": "Centered",
            "es": "Centrada",
            "fi": "Keskitetty",
            "fr": "Centré",
            "hi": "केंद्र",
            "it": "Centrato",
            "ja": "中央揃え",
            "ko": "센터 맞추기",
            "nb": "Sentrert",
            "nl": "Gecentreerd",
            "pl": "Wyśrodkowane",
            "pt-BR": "Centralizado",
            "pt-PT": "Centrado",
            "sv": "Centrera",
            "th": "ตรงกลาง",
            "tr": "Orta",
            "vi": "Giữa",
            "zh-CN": "居中",
            "zh-TW": "置中"
          }
        }
      ]
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": {
        "cs": "Obrázek loga",
        "da": "Logobillede",
        "de": "Logo-Foto",
        "en": "Logo image",
        "es": "Logo",
        "fi": "Logokuva",
        "fr": "Image du logo",
        "hi": "लोगो इमेज",
        "it": "Immagine del logo",
        "ja": "ロゴ画像",
        "ko": "로고 이미지",
        "nb": "Logobilde",
        "nl": "Afbeelding van logo",
        "pl": "Obraz logo",
        "pt-BR": "Imagem do logotipo",
        "pt-PT": "Imagem do logótipo",
        "sv": "Logobild",
        "th": "รูปภาพโลโก้",
        "tr": "Logo görseli",
        "vi": "Hình ảnh logo",
        "zh-CN": "logo 图片",
        "zh-TW": "標誌圖片"
      }
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "label": {
        "cs": "Šířka vlastního loga",
        "da": "Tilpasset logobredde",
        "de": "Logobreite",
        "en": "Custom logo width",
        "es": "Ancho del logo personalizado",
        "fi": "Mukautetun logon leveys",
        "fr": "Largeur personnalisée du logo",
        "hi": "कस्टम लोगो की चौड़ाई",
        "it": "Larghezza logo personalizzato",
        "ja": "ロゴの幅をカスタマイズする",
        "ko": "사용자 지정 로고 폭",
        "nb": "Tilpasset logobredde",
        "nl": "Aangepaste logo-breedte",
        "pl": "Niestandardowa szerokość logo",
        "pt-BR": "Largura do logotipo personalizado",
        "pt-PT": "Largura de logótipo personalizada",
        "sv": "Anpassad logotypsbredd",
        "th": "ความกว้างของโลโก้แบบกำหนดเอง",
        "tr": "Özel logo genişliği",
        "vi": "Chiều rộng logo tùy chỉnh",
        "zh-CN": "自定义 logo 宽度",
        "zh-TW": "自訂商標寬度"
      },
      "min": 50,
      "max": 250,
      "step": 5,
      "unit": "px",
      "default": 100
    },
    {
      "type": "link_list",
      "id": "main_linklist",
      "label": {
        "cs": "Nabídka",
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "hi": "मेनू",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "nb": "Meny",
        "nl": "Menu",
        "pl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "tr": "Menü",
        "vi": "Menu",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": {
        "cs": "Panel oznámení",
        "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": "공지 표시줄",
        "nb": "Kunngjøringslinje",
        "nl": "Aankondigingsbalk",
        "pl": "Pasek ogłoszeń",
        "pt-BR": "Barra de avisos",
        "pt-PT": "Barra de comunicado",
        "sv": "Meddelandefält",
        "th": "แถบประกาศ",
        "tr": "Duyuru çubuğu",
        "vi": "Thanh thông báo",
        "zh-CN": "公告栏",
        "zh-TW": "公告列"
      }
    },
    {
      "type": "checkbox",
      "id": "message",
      "label": {
        "cs": "Zobrazit oznámení",
        "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": "공지 표시",
        "nb": "Vis kunngjøring",
        "nl": "Aankondiging weergeven",
        "pl": "Pokaż ogłoszenie",
        "pt-BR": "Exibir comunicado",
        "pt-PT": "Mostrar comunicado",
        "sv": "Visa tillkännagivande",
        "th": "แสดงประกาศ",
        "tr": "Duyuruyu göster",
        "vi": "Hiển thị thông báo",
        "zh-CN": "显示公告",
        "zh-TW": "顯示公告"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": {
        "cs": "Jen domovská stránka",
        "da": "Kun startside",
        "de": "Nur Startseite",
        "en": "Home page only",
        "es": "Solo página de inicio",
        "fi": "Vain etusivu",
        "fr": "Page d'accueil uniquement",
        "hi": "केवल होमपेज",
        "it": "Solo home page",
        "ja": "ホームページのみ",
        "ko": "홈페이지만",
        "nb": "Kun på startsiden",
        "nl": "Alleen homepage",
        "pl": "Tylko strona główna",
        "pt-BR": "Apenas na página inicial",
        "pt-PT": "Apenas a página inicial",
        "sv": "Endast hemsida",
        "th": "หน้าแรกเท่านั้น",
        "tr": "Yalnızca ana sayfa",
        "vi": "Chỉ trang chủ",
        "zh-CN": "仅主页",
        "zh-TW": "僅限首頁"
      },
      "default": true
    },
    {
      "type": "text",
      "id": "message_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": {
        "cs": "Tady můžete zadat oznámení",
        "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": "여기에 공지하십시오",
        "nb": "Kunngjør noe her",
        "nl": "Kondig hier iets aan",
        "pl": "Ogłoś coś tutaj",
        "pt-BR": "Anuncie algo aqui",
        "pt-PT": "Anunciar algo aqui",
        "sv": "Meddela något här",
        "th": "ประกาศข้อความที่นี่",
        "tr": "Buraya bir duyuru ekleyin",
        "vi": "Thông báo điều gì đó tại đây",
        "zh-CN": "在此处进行公告",
        "zh-TW": "在此公告資訊"
      }
    },
    {
      "type": "url",
      "id": "message_link",
      "label": {
        "cs": "Odkaz",
        "da": "Link",
        "de": "Link",
        "en": "Link",
        "es": "Enlace",
        "fi": "Linkki",
        "fr": "Lien",
        "hi": "लिंक",
        "it": "Link",
        "ja": "リンク",
        "ko": "링크",
        "nb": "Kobling",
        "nl": "Link",
        "pl": "Link",
        "pt-BR": "Link",
        "pt-PT": "Ligação",
        "sv": "Länk",
        "th": "ลิงก์",
        "tr": "Bağlantı",
        "vi": "Liên kết",
        "zh-CN": "链接",
        "zh-TW": "連結"
      },
      "info": {
        "cs": "Volitelné",
        "da": "Valgfri",
        "de": "Optional",
        "en": "Optional",
        "es": "Opcional",
        "fi": "Valinnainen",
        "fr": "Facultatif",
        "hi": "वैकल्पिक",
        "it": "Facoltativo",
        "ja": "オプション",
        "ko": "선택 사항",
        "nb": "Valgfritt",
        "nl": "Optioneel",
        "pl": "Opcjonalnie",
        "pt-BR": "Opcional",
        "pt-PT": "Opcional",
        "sv": "Valfritt",
        "th": "ไม่จำเป็น",
        "tr": "İsteğe bağlı",
        "vi": "Không bắt buộc",
        "zh-CN": "可选",
        "zh-TW": "(選填)"
      }
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": {
        "cs": "Panel",
        "da": "Bjælke",
        "de": "Zeile",
        "en": "Bar",
        "es": "Barra",
        "fi": "Palkki",
        "fr": "Barre",
        "hi": "बार",
        "it": "Barra",
        "ja": "バー",
        "ko": "바",
        "nb": "Felt",
        "nl": "Balk",
        "pl": "Pasek",
        "pt-BR": "Barra",
        "pt-PT": "Barra",
        "sv": "Fält",
        "th": "แถบ",
        "tr": "Çubuk",
        "vi": "Thanh",
        "zh-CN": "栏",
        "zh-TW": "橫條"
      },
      "default": "#3a3a3a"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": "#ffffff"
    }
  ]
}
{% endschema %}

 

shopify, javascript
Lawrence7
Explorer
57 0 14

I am using the current debut theme too... please what code should i copy and past 🙂

Slava_Maksimov
Shopify Partner
34 5 12

The code is under the spoiler in my previous post. You need to delete everything from your header.liquid file and insert my code. Also see the screenshots

shopify, javascript
Lawrence7
Explorer
57 0 14

Screenshot from 2020-09-14 00-14-24.png

That is how my header look like after copying and pasting your header code, i am guessing we are not using the same version of debut theme 

can you please tell me the classes in need to change

i can paste my header.liquid code here if i have to

Thanks

Slava_Maksimov
Shopify Partner
34 5 12

My version 17.3.0

i can paste my header.liquid code here if i have to

yes, you can insert it under the spoiler

shopify, javascript
Lawrence7
Explorer
57 0 14
{% 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">
	
	
		{% 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 }}">
			  <span class=“site-header__menu-toggle--open”>
              {% include 'icon-hamburger' %}
                 	Menu
         	  	</span>
			  {% include 'icon-close' %}
			</button>
		  {% endunless %}
	
      {% 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">
          <div class="site-header__search site-header__icon">
            {% include 'search-form' %}
          </div>

          <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">
            <span class=“site-header__menu-toggle--open”>
            {% include 'icon-cart' %}
              Cart
         	</span>
            <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>

          {% if shop.enabled_currencies.size > 1 %}
            {% form 'currency', class: "currency-selector small--hide" %}
              <label for="CurrencySelector" class="visually-hidden">{{ 'general.currency.dropdown_label' | t }}</label>
              <div class="currency-selector__input-wrapper select-group">
                <select name="currency" id="CurrencySelector" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector>
                  {% for currency in shop.enabled_currencies %}
                    <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
                  {% endfor %}
                </select>
                {% include 'icon-chevron-down' %}
              </div>
            {% endform %}
          {% endif %}
			
			<!-- XXX -->
        </div>

      </div>
    </div>

    <nav class="mobile-nav-wrapper large-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="{{ childlink.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 %}
        {% if shop.enabled_currencies.size > 1 %}
          <li class="mobile-nav__item border-top">
            {% form 'currency', class: "currency-selector" %}
              <label for="CurrencySelectorMobile" class="currency-selector__label">{{ 'general.currency.dropdown_label' | t }}</label>
              <div class="currency-selector__input-wrapper select-group">
                <select name="currency" id="CurrencySelectorMobile" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector>
                  {% for currency in shop.enabled_currencies %}
                    <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
                  {% endfor %}
                </select>
                {% include 'icon-chevron-down' %}
              </div>
            {% endform %}
          </li>
        {% endif %}
      </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 %}
Lawrence7
Explorer
57 0 14
Slava_Maksimov
Shopify Partner
34 5 12
Click to expand...
{% 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">
	
	
		{% 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 }}">
			  <span class=“site-header__menu-toggle--open”>
              {% include 'icon-hamburger' %}
                 	Menu
         	  	</span>
			  {% include 'icon-close' %}
			</button>
		  {% endunless %}
	
      {% if section.settings.align_logo == 'center' %}
        {%- assign logo_classes = 'one-third push-one-third logo-align--center' -%}
      {% else %}
        {%- assign logo_classes = 'one-half 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 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' %}one-half{% else %}one-third 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">
          <div class="site-header__search site-header__icon">
            {% include 'search-form' %}
          </div>

          <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">
            <span class=“site-header__menu-toggle--open”>
            {% include 'icon-cart' %}
              Cart
         	</span>
            <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>

          {% if shop.enabled_currencies.size > 1 %}
            {% form 'currency', class: "currency-selector small--hide" %}
              <label for="CurrencySelector" class="visually-hidden">{{ 'general.currency.dropdown_label' | t }}</label>
              <div class="currency-selector__input-wrapper select-group">
                <select name="currency" id="CurrencySelector" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector>
                  {% for currency in shop.enabled_currencies %}
                    <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
                  {% endfor %}
                </select>
                {% include 'icon-chevron-down' %}
              </div>
            {% endform %}
          {% endif %}
			
			<!-- XXX -->
        </div>

      </div>
    </div>

    <nav class="mobile-nav-wrapper" 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="{{ childlink.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 %}
        {% if shop.enabled_currencies.size > 1 %}
          <li class="mobile-nav__item border-top">
            {% form 'currency', class: "currency-selector" %}
              <label for="CurrencySelectorMobile" class="currency-selector__label">{{ 'general.currency.dropdown_label' | t }}</label>
              <div class="currency-selector__input-wrapper select-group">
                <select name="currency" id="CurrencySelectorMobile" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector>
                  {% for currency in shop.enabled_currencies %}
                    <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
                  {% endfor %}
                </select>
                {% include 'icon-chevron-down' %}
              </div>
            {% endform %}
          </li>
        {% endif %}
      </ul>
    </nav>
  </header>

  {% if section.settings.align_logo == 'center' %}
  <nav class="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 %}
shopify, javascript
Lawrence7
Explorer
57 0 14

Bro i am getting an error when trying to save the fileThe error message i am gettingThe error message i am getting

Thank you very much i really do appreciate.

Slava_Maksimov
Shopify Partner
34 5 12

So you copied the code incorrectly when you sent it to me, just return it to the old version.

shopify, javascript
Lawrence7
Explorer
57 0 14

Yeah i am so sorry about that, i just saw my error now and corrected itThis how the header is looking now the hamburger menu is still not outThis how the header is looking now the hamburger menu is still not out

Thanks for all your time and your help so far i really do appreciate

Lawrence7
Explorer
57 0 14

Hello Slavan, i want to thank you for all your help, without you i would not have gotten this far but i just want to ask for one more help please, i know the hamburger menu is already active in the code you gave me but i think some how it is set to "hidden" that's why the menu is not showing, please how do i make it visible? Thank ypu.