Hello, I recently put in a new code to my header.liquid file to center my logo and get the hamburger style menu on Mobile. However, every time I try and click the drop down menu, it either doesn’t open or if it does and I click a section within the menu, it goes blank. Plus the search icon is completely gone as well I’m not sure if it’s being covered or what but it’s not there anymore on Mobile. If someone could take a look at my code to see where there might be an error for this situation I have I would greatly appreciate it, thank you!
{% if section.settings.message %}
{% 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 %}{% endif %}
{% if section.settings.message %}
{% if section.settings.home_page_only == false or template.name == ‘index’ %}
.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 }}; }{% if section.settings.message_link == blank %}
{% else %}
{% endif %}
{% endif %}
{% endif %}
{% if section.settings.align_logo == ‘center’ %}
{%- assign logo_classes = ‘small–two-quarters 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 %}
{% include ‘icon-hamburger’ %}
{% include ‘icon-close’ %}
{% endunless %}
{% 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 template.name == ‘index’ %}
{% else %}
{% endif %}
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}
{% 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”>
{% 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;”>
{% else %}
{% endif %}
{% if template.name == ‘index’ %}
{% else %}
{% endif %}
{% if section.settings.align_logo == ‘left’ %}
{% include ‘site-nav’ %}
{% endif %}
{% include ‘search-form’ %}
{% include ‘icon-search’ %}
{{ ‘layout.navigation.search’ | t }}
{% if shop.customer_accounts_enabled %}
{% if customer %}
{% include ‘icon-login’ %}
{{ ‘layout.customer.account’ | t }}
{% else %}
{% include ‘icon-login’ %}
{{ ‘layout.customer.log_in’ | t }}
{% endif %}
{% endif %}
{% include ‘icon-cart’ %}
{{ ‘layout.cart.title’ | t }}
{% if cart.item_count > 0 %}
{{ cart.item_count }}
{{ ‘layout.cart.items_count’ | t: count: cart.item_count }}
{% endif %}
{% if shop.enabled_currencies.size > 1 %}
{% form ‘currency’, class: “currency-selector small–hide” %}
{{ ‘general.currency.dropdown_label’ | t }}
{% include ‘icon-chevron-down’ %}
{% endform %}
{% endif %}
-
{% if link.links != blank %}
{% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
{{ link.title | escape }}
{% include ‘icon-chevron-right’ %}
-
{{- link.title }} {{ ‘layout.navigation.menu’ | t -}}
-
{% include ‘icon-chevron-left’ %}
{{ link.title | escape }}
-
{% if childlink.links != blank %}
{% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
{{ childlink.title | escape }}
{% include ‘icon-chevron-right’ %}
-
{{- childlink.title }} {{ ‘layout.navigation.menu’ | t -}}
-
{% include ‘icon-chevron-left’ %}
<a href=“{{ childlink.url }}”
class=“mobile-nav__sublist-link mobile-nav__sublist-header”
{% if childlink.current %} aria-current=“page”{% endif %}
{{ childlink.title | escape }}
-
<a href=“{{ grandchildlink.url }}”
class=“mobile-nav__sublist-link”
{% if grandchildlink.current %} aria-current=“page”{% endif %}
{{ grandchildlink.title | escape }}
{% for grandchildlink in childlink.links %}
{% endfor %}
{% else %}
<a href=“{{ childlink.url }}”
class=“mobile-nav__sublist-link”
{% if childlink.current %} aria-current=“page”{% endif %}
{{ childlink.title | escape }}
{% endif %}
-
{% for childlink in link.links %}
{% endfor %}
{% else %}
<a href=“{{ link.url }}”
class=“mobile-nav__link{% if link.active %} mobile-nav__link–active{% endif %}”
{% if link.current %} aria-current=“page”{% endif %}
{{ link.title | escape }}
{% endif %}
-
-
{% form ‘currency’, class: “currency-selector” %}
{{ ‘general.currency.dropdown_label’ | t }}
{% include ‘icon-chevron-down’ %}
{% endform %}
{% for link in linklists[section.settings.main_linklist].links %}
{%- assign outerLoopIndex = forloop.index -%}
{% endfor %}
{% if shop.enabled_currencies.size > 1 %}
{% endif %}
{% if section.settings.align_logo == ‘center’ %}
{% include ‘site-nav’, nav_alignment: ‘site-nav–centered’ %}
{% endif %}
{% if template.name == ‘index’ %}
{% assign potential_action_target = shop.url | append: “/search?q={search_term_string}” %}
{% endif %}
{% schema %}
{
“name”: {
“de”: “Titel”,
“en”: “Header”,
“es”: “Encabezado”,
“fr”: “En-tête”,
“it”: “Header”,
“ja”: “ヘッダー”,
“nl”: “Koptekst”,
“pt-BR”: “Cabeçalho”,
“zh-CN”: “标头”,
“zh-TW”: “標頭”
},
“settings”: [
{
“type”: “radio”,
“id”: “align_logo”,
“label”: {
“de”: “Logo-Ausrichtung”,
“en”: “Logo alignment”,
“es”: “Alineación de logotipo”,
“fr”: “Alignement du logo”,
“it”: “Allineamento logo”,
“ja”: “ロゴアラインメント”,
“nl”: “Logo-uitlijning”,
“pt-BR”: “Alinhamento do logotipo”,
“zh-CN”: “logo 对齐方式”,
“zh-TW”: “商標對齊”
},
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: {
“de”: “Links”,
“en”: “Left”,
“es”: “Izquierda”,
“fr”: “Gauche”,
“it”: “Sinistra”,
“ja”: “左”,
“nl”: “Links”,
“pt-BR”: “Esquerda”,
“zh-CN”: “左侧”,
“zh-TW”: “左方”
}
},
{
“value”: “center”,
“label”: {
“de”: “Mittig”,
“en”: “Centered”,
“es”: “Centrada”,
“fr”: “Centré”,
“it”: “Centrato”,
“ja”: “中央揃え”,
“nl”: “Gecentreerd”,
“pt-BR”: “Centralizado”,
“zh-CN”: “居中”,
“zh-TW”: “置中”
}
}
]
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: {
“de”: “Logo-Foto”,
“en”: “Logo image”,
“es”: “Logotipo”,
“fr”: “Image du logo”,
“it”: “Immagine del logo”,
“ja”: “ロゴ画像”,
“nl”: “Afbeelding van logo”,
“pt-BR”: “Imagem do logotipo”,
“zh-CN”: “logo 图片”,
“zh-TW”: “標誌圖片”
}
},
{
“type”: “range”,
“id”: “logo_max_width”,
“label”: {
“de”: “Logobreite”,
“en”: “Custom logo width”,
“es”: “Ancho del logotipo personalizado”,
“fr”: “Largeur personnalisée du logo”,
“it”: “Larghezza logo personalizzato”,
“ja”: “ロゴの幅をカスタムする”,
“nl”: “Aangepaste logo-breedte”,
“pt-BR”: “Largura do logotipo personalizado”,
“zh-CN”: “自定义 logo 宽度”,
“zh-TW”: “自訂商標寬度”
},
“min”: 50,
“max”: 250,
“step”: 5,
“unit”: {
“de”: “px”,
“en”: “px”,
“es”: “px”,
“fr”: “px”,
“it”: “px”,
“ja”: “px”,
“nl”: “px”,
“pt-BR”: “px”,
“zh-CN”: “px”,
“zh-TW”: “像素”
},
“default”: 100
},
{
“type”: “link_list”,
“id”: “main_linklist”,
“label”: {
“de”: “Menü”,
“en”: “Menu”,
“es”: “Menú”,
“fr”: “Menu”,
“it”: “Menu”,
“ja”: “メニュー”,
“nl”: “Menu”,
“pt-BR”: “Menu”,
“zh-CN”: “菜单”,
“zh-TW”: “選單”
},
“default”: “main-menu”
},
{
“type”: “header”,
“content”: {
“de”: “Ankündigungsbereich”,
“en”: “Announcement bar”,
“es”: “Barra de anuncios”,
“fr”: “Barre d’annonces”,
“it”: “Barra degli annunci”,
“ja”: “告知バー”,
“nl”: “Aankondigingsbalk”,
“pt-BR”: “Barra de anúncios”,
“zh-CN”: “公告栏”,
“zh-TW”: “公告列”
}
},
{
“type”: “checkbox”,
“id”: “message”,
“label”: {
“de”: “Ankündigung anzeigen”,
“en”: “Show announcement”,
“es”: “Mostrar anuncio”,
“fr”: “Afficher l’annonce”,
“it”: “Mostra annuncio”,
“ja”: “告知を表示する”,
“nl”: “Aankondiging weergeven”,
“pt-BR”: “Exibir anúncio”,
“zh-CN”: “显示公告”,
“zh-TW”: “顯示公告”
},
“default”: false
},
{
“type”: “checkbox”,
“id”: “home_page_only”,
“label”: {
“de”: “Nur Startseite”,
“en”: “Home page only”,
“es”: “Solo página de inicio”,
“fr”: “Page d’accueil uniquement”,
“it”: “Solo home page”,
“ja”: “ホームページのみ”,
“nl”: “Alleen startpagina”,
“pt-BR”: “Apenas página inicial”,
“zh-CN”: “仅主页”,
“zh-TW”: “僅限首頁”
},
“default”: true
},
{
“type”: “text”,
“id”: “message_text”,
“label”: {
“de”: “Text”,
“en”: “Text”,
“es”: “Texto”,
“fr”: “Texte”,
“it”: “Testo”,
“ja”: “テキスト”,
“nl”: “Tekst”,
“pt-BR”: “Texto”,
“zh-CN”: “文本”,
“zh-TW”: “文字”
},
“default”: {
“de”: “Hier etwas ankündigen”,
“en”: “Announce something here”,
“es”: “Anuncia algo aquí”,
“fr”: “Annoncez quelque chose ici”,
“it”: “Annuncia qualcosa qui”,
“ja”: “ここで告知してください”,
“nl”: “Kondig hier iets aan”,
“pt-BR”: “Anuncie algo aqui”,
“zh-CN”: “在此处进行公告”,
“zh-TW”: “在此公告資訊”
}
},
{
“type”: “url”,
“id”: “message_link”,
“label”: {
“de”: “Link”,
“en”: “Link”,
“es”: “Enlace”,
“fr”: “Lien”,
“it”: “Link”,
“ja”: “リンク”,
“nl”: “Link”,
“pt-BR”: “Link”,
“zh-CN”: “链接”,
“zh-TW”: “連結”
},
“info”: {
“de”: “Optional”,
“en”: “Optional”,
“es”: “Opcional”,
“fr”: “Facultatif”,
“it”: “Facoltativo”,
“ja”: “選択させる”,
“nl”: “Optioneel”,
“pt-BR”: “Opcional”,
“zh-CN”: “可选”,
“zh-TW”: “(選填)”
}
},
{
“type”: “color”,
“id”: “color_bg”,
“label”: {
“de”: “Zeile”,
“en”: “Bar”,
“es”: “Barra”,
“fr”: “Barre”,
“it”: “Barra”,
“ja”: “バー”,
“nl”: “Balk”,
“pt-BR”: “Barra”,
“zh-CN”: “栏”,
“zh-TW”: “橫條”
},
“default”: “#7796a8”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: {
“de”: “Text”,
“en”: “Text”,
“es”: “Texto”,
“fr”: “Texte”,
“it”: “Testo”,
“ja”: “テキスト”,
“nl”: “Tekst”,
“pt-BR”: “Texto”,
“zh-CN”: “文本”,
“zh-TW”: “文字”
},
“default”: “#fff”
}
]
}
{% endschema %}