Search Icon MISSING on Desktop but not mobile

Store Design
, , ,
1

Hello,

My Search icon is missing on desktop but not mobile. I believe it has something to do with the code but I can’t quite find the issue. Would love some help fixing this issue! Thank you!

URL: https://lavaa.com/

Screenshot 2022-12-10 152506.png
Screenshot 2022-12-10 152506.png1259×390 57.1 KB

2

Hi

Can you share you ‘header.liquid’ code? I can look into it for you. I think you may used an expired link on desktop

3

Hello Kani, here is the code we have:

{%- comment -%}

This file has been modified by the Yoast SEO for Shopify app.

You can learn more about this (and learn how to cleanly revert these changes) at https://yoa.st/removing-theme-changes.

{%- endcomment -%}

{%- liquid

assign disabled_by_yoast_seo = true

if content_for_header contains ‘yoast-active-script’

assign disabled_by_yoast_seo = false

endif

-%}

{% if section.settings.message %}

.notification-bar, .roof-container { background-color: {{ section.settings.color_bg }}; } .notification-bar__message, .free_shipping_50, .free_shipping_50 a { color: {{ section.settings.color_text }}; } {% 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 %}

.section-header-main { transition: 0.75s ease-in-out; } ul.site-nav__childlist-grid { flex-direction: column; } ul.site-nav__childlist-grid ul { position: absolute; left: 100%; top: -12px; background-color: white; padding: 20px; display: none; } li.site-nav__childlist-item { position: relative; height: 100%; width: 100%; } li.site-nav__childlist-item:hover ul { display: block; border: 1px solid rgb(239, 219, 217); } .site-nav__childlist { position: relative; } li.site-nav--has-dropdown.site-nav--has-centered-dropdown { position: relative; } a.site-nav__link.site-nav__child-link.site-nav__child-link--parent { display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: 0.5s ease; } svg.Icon.Icon--select-arrow-right { width: 10px; height: 10px; } a.site-nav__link.site-nav__child-link.site-nav__child-link--parent:hover span.icon-for-drop-down { transform: translateX(10px); } span.icon-for-drop-down { transition: 0.5s ease; } li.site-nav__childlist-item { margin: 0; } .site-nav__childlist { padding-bottom: 25px; } li.site-nav__childlist-item:last-child ul { top: -150px; z-index: 999999; } ul.mobile-nav__dropdown.Last-Dropdown { height: 350px; overflow: auto; }

{% include ‘roof’ %}

    {% for link in linklists[section.settings.main_linklist].links %}

    {%- assign outerLoopIndex = forloop.index -%}

  • {% if link.links != blank %}

    {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}

    {{ link.title }}

    {% include ‘icon-chevron-right’ %}

    {{ ‘layout.navigation.expand’ | t }}

    • {% include ‘icon-chevron-left’ %}

      {{ ‘layout.navigation.collapse’ | t }}

      <a href=“{{ link.url }}” class=“mobile-nav__sublist-link mobile-nav__sublist-header”{% if link.active %} aria-current=“page”{% endif %}>

      {{ link.title }}

      • {% for childlink in link.links %}

    • {% if childlink.links != blank %}

      {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}

      {{ childlink.title }}

      {% include ‘icon-chevron-right’ %}

      {{ ‘layout.navigation.expand’ | t }}

      • {% include ‘icon-chevron-left’ %}

        {{ ‘layout.navigation.collapse’ | t }}

        <a href=“{{ childlink.url }}” class=“mobile-nav__sublist-link mobile-nav__sublist-header”{% if childlink.active %} aria-current=“page”{% endif %}>

        {{ childlink.title }}

        • {% for grandchildlink in childlink.links %}

      • <a href=“{{ grandchildlink.url }}” class=“mobile-nav__sublist-link”{% if grandchildlink.active %} aria-current=“page”{% endif %}>

        {{ grandchildlink.title | escape }}

        • {% endfor %}

      {% else %}

      <a href=“{{ childlink.url }}” class=“mobile-nav__sublist-link”{% if childlink.active %} aria-current=“page”{% endif %}>

      {{ childlink.title | escape }}

      {% endif %}

      • {% endfor %}

    {% else %}

    <a href=“{{ link.url }}” class=“mobile-nav__link”{% if link.active %} aria-current=“page”{% endif %}>

    {{ link.title }}

    {% endif %}

    • {% endfor %}

    {% if shop.customer_accounts_enabled %}

    {% if customer %}

  • {{ ‘layout.customer.account’ | t }}

    • {% else %}

  • {{ ‘layout.customer.log_in’ | t }}

    • {% endif %}

    {% endif %}

{% unless linklists[‘main-menu’] == blank %}

{% include ‘icon-hamburger’ %}

{% include ‘icon-close’ %}

{{ ‘layout.navigation.toggle’ | t }}

{% endunless %}

{%- assign img_url = section.settings.logo | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

<a href=“/” {% if disabled_by_yoast_seo %}itemprop=“url”{% endif %} 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 id=“normal-size-logo” class=“lazyload js”

src=“{{ ‘logo-160.jpg’ | asset_img_url: ‘master’ }}”

data-src=“{{ ‘logo-160.jpg’ | asset_img_url: ‘master’ }}”

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”>

<img id=“smallest-logo” class=“lazyload js”

src=“{{ ‘logo-120.jpg’ | asset_img_url: ‘master’ }}”

data-src=“{{ ‘logo-120.jpg’ | asset_img_url: ‘master’ }}”

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=“{{ ‘logo-mobile.jpg’ | asset_img_url: image_size }}”

srcset=“{{ ‘logo-mobile.jpg’ | asset_img_url: image_size }} 1x, {{ ‘lavaa-logo-gold.jpg’ | asset_img_url: image_size, scale: 2 }} 2x”

alt=“{{ section.settings.logo.alt | default: shop.name }}”

{% if disabled_by_yoast_seo %}itemprop=“logo”{% endif %}

style=“max-width: {{ section.settings.logo_max_width }}px;”>

{% comment %}

{% unless linklists[section.settings.main_linklist] == blank %}

{% include ‘icon-hamburger’ %}

{% include ‘icon-close’ %}

{{ ‘layout.navigation.toggle’ | t }}

Menu

{% endunless %}

{% endcomment %}

{% include ‘search-form’ %}

{% if settings.shipment_timer_enable %}

{% include ‘shipment-timer’ %}

{% endif %}

{% include ‘site-nav’ %}

.cart_symbol { background-color: #fe6db8; color: #FFF; border-radius: 100px; width: 16px; height: 16px; position: absolute; font-size: 10px; display: flex; align-items: center; justify-content: center; text-align: center; left: 40px; letter-spacing: 0; }

{% schema %}

{

“name”: “Header”,

“settings”: [

{

“type”: “radio”,

“id”: “align_logo”,

“label”: “Logo alignment”,

“default”: “left”,

“options”: [

{“value”: “left”, “label”: “Left”},

{“value”: “center”, “label”: “Centered”}

]

},

{

“type”: “image_picker”,

“id”: “logo”,

“label”: “Logo image”

},

{

“type”: “text”,

“id”: “logo_max_width”,

“label”: “Custom logo width (in pixels)”,

“default”: “100”

},

{

“type”: “link_list”,

“id”: “main_linklist”,

“label”: “Menu”,

“default”: “main-menu”

},

{

“type”: “header”,

“content”: “Announcement bar”

},

{

“type”: “checkbox”,

“id”: “message”,

“label”: “Show announcement”,

“default”: false

},

{

“type”: “checkbox”,

“id”: “home_page_only”,

“label”: “Home page only”,

“default”: true

},

{

“type”: “text”,

“id”: “message_text”,

“label”: “Announcement text”,

“default”: “Announce something here”

},

{

“type”: “url”,

“id”: “message_link”,

“label”: “Announcement link”,

“info”: “Optional”

},

{

“type”: “color”,

“id”: “color_bg”,

“label”: “Bar”,

“default”: “#7796a8”

},

{

“type”: “color”,

“id”: “color_text”,

“label”: “Text”,

“default”: “#fff”

}

]

}

{% endschema %}

4

{%- comment -%}
This file has been modified by the Yoast SEO for Shopify app.
You can learn more about this (and learn how to cleanly revert these changes) at https://yoa.st/removing-theme-changes.
{%- endcomment -%}
{%- liquid
assign disabled_by_yoast_seo = true
if content_for_header contains ‘yoast-active-script’
assign disabled_by_yoast_seo = false
endif
-%}
{% if section.settings.message %}

.notification-bar, .roof-container { background-color: {{ section.settings.color_bg }}; } .notification-bar__message, .free_shipping_50, .free_shipping_50 a { color: {{ section.settings.color_text }}; } {% 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 %}

.section-header-main { transition: 0.75s ease-in-out; } ul.site-nav__childlist-grid { flex-direction: column; } ul.site-nav__childlist-grid ul { position: absolute; left: 100%; top: -12px; background-color: white; padding: 20px; display: none; } li.site-nav__childlist-item { position: relative; height: 100%; width: 100%; } li.site-nav__childlist-item:hover ul { display: block; border: 1px solid rgb(239, 219, 217); } .site-nav__childlist { position: relative; } li.site-nav--has-dropdown.site-nav--has-centered-dropdown { position: relative; } a.site-nav__link.site-nav__child-link.site-nav__child-link--parent { display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: 0.5s ease; } svg.Icon.Icon--select-arrow-right { width: 10px; height: 10px; } a.site-nav__link.site-nav__child-link.site-nav__child-link--parent:hover span.icon-for-drop-down { transform: translateX(10px); } span.icon-for-drop-down { transition: 0.5s ease; } li.site-nav__childlist-item { margin: 0; } .site-nav__childlist { padding-bottom: 25px; } li.site-nav__childlist-item:last-child ul { top: -150px; z-index: 999999; } ul.mobile-nav__dropdown.Last-Dropdown { height: 350px; overflow: auto; }
{% include 'roof' %}
    {% for link in linklists[section.settings.main_linklist].links %} {%- assign outerLoopIndex = forloop.index -%}
  • {% if link.links != blank %} {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %} {{ link.title }}
    {% include 'icon-chevron-right' %} {{ 'layout.navigation.expand' | t }}
    • {% include 'icon-chevron-left' %} {{ 'layout.navigation.collapse' | t }}
      {{ link.title }}

      • {% for childlink in link.links %}

    • {% if childlink.links != blank %} {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %} {{ childlink.title }}
      {% include 'icon-chevron-right' %} {{ 'layout.navigation.expand' | t }}
      {% else %} {{ childlink.title | escape }} {% endif %}
      • {% endfor %}
    {% else %} {{ link.title }} {% endif %}
    • {% endfor %} {% if shop.customer_accounts_enabled %} {% if customer %}
  • {{ 'layout.customer.account' | t }}
    • {% else %}
  • {{ 'layout.customer.log_in' | t }}
    • {% endif %} {% endif %}
{% unless linklists['main-menu'] == blank %} {% include 'icon-hamburger' %} {% include 'icon-close' %} {{ 'layout.navigation.toggle' | t }} {% endunless %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %} {{ logo_alt | escape }} {{ logo_alt | escape }} {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %} {{ section.settings.logo.alt | default: shop.name }} {% comment %} {% unless linklists[section.settings.main_linklist] == blank %} {% include 'icon-hamburger' %} {% include 'icon-close' %} {{ 'layout.navigation.toggle' | t }} Menu {% endunless %} {% endcomment %}
{% include 'search-form' %}
{% if settings.shipment_timer_enable %}
{% include 'shipment-timer' %}
{% endif %}
{% include 'site-nav' %}
.cart_symbol { background-color: #fe6db8; color: #FFF; border-radius: 100px; width: 16px; height: 16px; position: absolute; font-size: 10px; display: flex; align-items: center; justify-content: center; text-align: center; left: 40px; letter-spacing: 0; }

{% schema %}
{
“name”: “Header”,
“settings”: [
{
“type”: “radio”,
“id”: “align_logo”,
“label”: “Logo alignment”,
“default”: “left”,
“options”: [
{“value”: “left”, “label”: “Left”},
{“value”: “center”, “label”: “Centered”}
]
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“type”: “text”,
“id”: “logo_max_width”,
“label”: “Custom logo width (in pixels)”,
“default”: “100”
},
{
“type”: “link_list”,
“id”: “main_linklist”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “checkbox”,
“id”: “message”,
“label”: “Show announcement”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “home_page_only”,
“label”: “Home page only”,
“default”: true
},
{
“type”: “text”,
“id”: “message_text”,
“label”: “Announcement text”,
“default”: “Announce something here”
},
{
“type”: “url”,
“id”: “message_link”,
“label”: “Announcement link”,
“info”: “Optional”
},
{
“type”: “color”,
“id”: “color_bg”,
“label”: “Bar”,
“default”: “#7796a8”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Text”,
“default”: “#fff”
}
]
}
{% endschema %}