Please help me make the search icon NOT disappear on mobile (Fashionopolism)

Technical Q&A
, ,

Topic summary

A user is seeking help with a Shopify theme (Fashionopolism) where the search icon disappears on mobile devices. They’ve shared a large code snippet containing:

Code Components:

  • Header and announcement bar rendering logic
  • Cart functionality (drawer/modal configurations)
  • Search form implementation with predictive search capabilities
  • CSS styling rules (notably written in reverse/obfuscated format)

Key Technical Elements:

  • Liquid template code for Shopify
  • Predictive search feature with ARIA accessibility attributes
  • Responsive design media queries for mobile (max-width: 740px) and desktop (max-width: 980px)
  • Grid and flexbox layout configurations
  • Logo sizing and header layout settings

Current Status:
The issue remains unresolved with no responses yet. The reversed CSS syntax in portions of the code may be intentional obfuscation or could be part of the problem affecting mobile display. The user needs assistance identifying why the search icon visibility fails on mobile viewports.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

{%
render ‘announcement-bar’,
section: section,
block: block
%}

{%- liquid

if settings.cart_type == ‘drawer’
assign cart_classes = ‘js-slideout-open’
assign cart_settings = ‘data-wau-slideout-target=“ajax-cart” data-slideout-direction=“right”’
elsif settings.cart_type == ‘modal_cart’
assign cart_classes = ‘js-modal-open’
assign cart_settings = ‘data-wau-modal-target=“ajax-cart”’
endif

-%}

{% capture search %}
{%- if settings.predictive_search_enabled -%}
<predictive-search
data-routes=“{{ routes.predictive_search_url | default: ‘/search/suggest’ }}”
data-input-selector=‘input[name=“q”]’
data-results-selector=“#predictive-search-header”

{%- endif -%}

{{ 'sections.search.placeholder' | t }} {% render 'snip-icons', wrapper: '.slideout__trigger-search', type: 'apollo', icon: 'search', classes: 'vib-center', size: '14px', fill: 'var(--cart-links)', hover: 'var(--cart-links)' %}

{% if settings.search_show_products_only %}

{% endif %}

{%- if settings.predictive_search_enabled -%}

{%- endif -%} {%- if settings.predictive_search_enabled -%} {%- endif -%} {% endcapture %}
{% if section.settings.full_width_announcement_bar %}
{% endif %}
{% render 'snip-icons', wrapper: '.slideout__trigger-mobile-menu', type: 'apollo', icon: 'menu-bars', classes: 'slideout__trigger-mobile-menu--icon vib-center', size: '16px', fill: 'var(--cart-links)', hover: 'var(--cart-links)' %}

{% if section.settings.search_layout == ‘visible’ and section.settings.header_layout == ‘center’ %}

{{ search }}
{% endif %}

{% if section.settings.search_layout == ‘visible’ and section.settings.header_layout == ‘left’ %}

{{ search }}
{% endif %}

{% if section.settings.header_layout == ‘inline’ %}

    {% render 'navigation' %}
{% endif %}

{% if section.settings.full_width_announcement_bar %}

{% endif %}

{% if section.settings.header_layout != ‘inline’ %}

{% if section.settings.full_width_announcement_bar %}
{% endif %}
    {% render 'navigation' %}
{% if section.settings.full_width_announcement_bar %}
{% endif %} {% endif %}
{% if section.settings.search_layout == 'modal' %} .modal__inner-content-container form.header-search-form { position: relative; } .modal__inner-content-container button.search-button { position: absolute; right: 0; top: 0; } {% else %} div#predictive-search { width: 100%; position: absolute; left: 0; right: 0; z-index: 13; transform: translateY(10px); } {% endif %} {% if section.settings.logo != blank %} #logo img { max-width: {{ section.settings.logo_max_width }}px; } @media screen and (max-width: 740px) { #logo img { max-width: {{ section.settings.logo_max_width_mobile }}px; } } #logo { line-height: 0;} {% endif %} {% if section.settings.header_layout == 'center' %} #logo { text-align: center; } {% endif %} nav { {% if section.settings.header_layout == 'center' %}text-align: center;{% endif %} line-height: {{ section.settings.nav_height }}px; } {% if section.settings.header_layout == 'center' %} @media screen and ( min-width: 740px ) and ( max-width: 980px ) { ul#social-links { text-align: right; float: right; } } {% endif %} {% unless section.settings.header_layout == 'inline' %} #identity { display: flex; align-items: center; } {% endunless %} {% if section.settings.header_layout == 'inline' %} header.theme-header.stickynav #identity { display: flex; grid-template-columns: 1fr 2fr 1fr; padding-left: 10px; padding-right: 10px; justify-content: space-between; flex-direction: row-reverse; } header.theme-header.stickynav #identity > div, #identity nav { float: none! important; width: unset !important; margin: 0; align-self: center; } header.theme-header.stickynav #identity #logo { justify-self: start; } header.theme-header.stickynav #identity nav.inline-header { justify-self: stretch; } header.theme-header.stickynav #identity #cart-container { justify-self: end; } @media only screen and (min-width: 768px) { header.theme-header.stickynav #identity #cart-container { justify-self: center; } header.theme-header.stickynav #identity #logo { justify-self: center; } } @media only screen and (max-width: 980px) { header.theme-header.stickynav #identity nav.inline-header { display: inline-block; } header.theme-header.stickynav #identity #logo, header.theme-header.stickynav #identity #cart-container, header.theme-header.stickynav #identity > div{ justify-self: center; } } {% endif %} {% if section.settings.icons_only %} span.customer-words, span.my-cart-text { display: none; } {% endif %} {% if section.settings.search_layout == 'visible' %} ul#predictive-search-results-list { box-shadow: 0px 3px 3px -1px #999; } {% endif %} {% if section.settings.floating_header %} @media screen and (min-width: 981px) { /* -- Set header height and lift image sections --*/ body.template-index #MainContent .header__overlay-banner:first-child { margin-top: calc(var(--header-height) * -1); } /* -- Override theme settings background colors --*/ body.template-index .header-section, body.template-index header, body.template-index header:not(.header--sticky), body.template-index .navigation:not(.navigation--sticky) { background: transparent; } /* -- Reuse theme settings backgrounds on hover --*/ body.template-index .header-section:hover, body.template-index .header-section:hover header, body.template-index header.header--sticky { background: var(--header-background); } /* -- Override theme settings link and fill colors --*/ body.template-index .header-section header:not(.header--sticky) ul#cart > li a, body.template-index .header-section header:not(.header--sticky) ul#cart > li button, body.template-index .header-section header:not(.header--sticky) button.slideout__trigger-mobile-menu.js-slideout-open, body.template-index .header-section header:not(.header--sticky) #logo a, body.template-index .header-section header:not(.header--sticky) a.navigation__menulink, body.template-index .header-section header:not(.header--sticky) span.js-cart-count, body.template-index .header-section header:not(.header--sticky) a.navigation__menulink, body.template-index .header-section nav.full-nav:not(.navigation--sticky) a.navigation__menulink, body.template-index .header-section input.header-search::-webkit-input-placeholder, body.template-index .header-section input.header-search::placeholder { color: var(--header-float-color); } body.template-index .header-section header:not(.header--sticky) svg g.hover-fill, body.template-index .header-section header:not(.header--sticky) a.navigation__menulink svg g.hover-fill, body.template-index .header-section nav.full-nav:not(.navigation--sticky) a.navigation__menulink svg g.hover-fill { fill: var(--header-float-color); } /* -- Reuse theme settings link and fill colors when hovering --*/ body.template-index .header-section:hover header ul#cart > li a, body.template-index .header-section:hover header ul#cart > li button, body.template-index .header-section:hover header button.slideout__trigger-mobile-menu.js-slideout-open, body.template-index .header-section:hover header #logo a, body.template-index .header-section:hover header span.js-cart-count, body.template-index .header-section:hover nav.navigation:not(.full-nav) a.navigation__menulink { color: var(--cart-links); } body.template-index .header-section:hover header:not(.header--sticky) svg g.hover-fill, body.template-index .header-section:hover header:not(.header--sticky) a.navigation__menulink svg g.hover-fill { fill: var(--cart-links); } body.template-index .header-section:hover input.header-search::-webkit-input-placeholder, body.template-index .header-section:hover input.header-search::placeholder { color: var(--disabled-text); } /* -- Reuse theme settings link and fill colors when docked --*/ body.template-index .header-section header.header--sticky nav.navigation a.navigation__menulink { color: var(--cart-links); } body.template-index .header-section header.header--sticky nav.navigation a.navigation__menulink svg g.hover-fill { fill: var(--cart-links); } /* -- Reuse theme settings link and fill colors when full size nav --*/ body.template-index .header-section:hover nav.full-nav:not(.navigation--sticky) { background: var(--navigation); } body.template-index .header-section:hover nav.full-nav:not(.navigation--sticky) a.navigation__menulink { color: var(--nav-color); } body.template-index .header-section:hover nav.full-nav:not(.navigation--sticky) a.navigation__menulink svg g.hover-fill { fill: var(--nav-color); } .navigation, .header-section a, .header-section button, .header-section span, .header-section svg g.hover-fill { transition: all .25s ease-in-out; } .header-section a span, .header-section button span { transition: none; } } {% endif %} @media only screen and (max-width: 768px) { .hidemobile { display:none !important; } .search-icon { display: inline-block !important; /* Ensure the search icon is always displayed on mobile */ } } @media only screen and (min-width: 769px) { .hidedesktop { display:none !important; } .search-icon { display: inline-block !important; /* Ensure the search icon is always displayed on mobile */ } } @media only screen and (max-width: 768px) { .hidemobile { display: none !important; } .search-icon { display: inline-block !important; /* Ensure the search icon is always displayed on mobile */ } } @media only screen and (min-width: 769px) { .hidedesktop { display: none !important; } }

{% schema %}
{
“name”: “Header”,
“class”: “js-site-header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “full_width_announcement_bar”,
“label”: “Full width”,
“default”: true
},
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “checkbox”,
“id”: “show_social_icons”,
“label”: “Show social icons”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: false,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_country_selector”,
“label”: “Enable country/region selector”,
“default”: true,
“info”: “To add a country/region, go to your payment settings.”
},
{
“type”: “checkbox”,
“id”: “show_flag”,
“label”: “Show country flags”,
“default”: true
},
{
“type”: “header”,
“content”: “Header”
},
{
“type”: “select”,
“id”: “header_layout”,
“label”: “Header layout”,
“options”: [{
“value”: “left”,
“label”: “Logo left, navigation below”
},
{
“value”: “center”,
“label”: “Logo center, navigation below”
},
{
“value”: “inline”,
“label”: “Logo left, navigation inline”
},
{
“value”: “inline_center”,
“label”: “Logo center, navigation inline”
}
]
},
{
“type”: “checkbox”,
“id”: “floating_header”,
“label”: “Overlay on image sections”,
“info”:“Puts header on top of the first section if slideshow or image with text overlay has been selected”,
“default”: false
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 80,
“max”: 300,
“step”: 5,
“unit”: “px”,
“label”: “Logo max width”,
“default”: 200
},
{
“type”: “range”,
“id”: “logo_max_width_mobile”,
“min”: 80,
“max”: 200,
“step”: 5,
“unit”: “px”,
“label”: “Mobile logo max width”,
“default”: 200
},
{
“type”: “header”,
“content”: “Cart and account links”
},
{
“type”: “checkbox”,
“id”: “icons_only”,
“label”: “Show icons only”,
“default”: false
},
{
“type”: “select”,
“id”: “search_layout”,
“label”: “Search”,
“default”: “modal”,
“options”: [{
“value”: “visible”,
“label”: “Always visible (excl inline layout)”
},
{
“value”: “modal”,
“label”: “Modal”
},
{
“value”: “none”,
“label”: “None”
}
]
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “main_nav”,
“label”: “Menu”,
“default”: “main-menu”,
“info”: “It is best practice to select the same menu used in the Mobile Nav. Learn More”
},
{
“type”: “range”,
“id”: “nav_height”,
“min”: 30,
“max”: 100,
“step”: 2,
“unit”: “px”,
“label”: “Height”,
“default”: 40
},
{
“type”: “range”,
“id”: “linklist_breakpoint”,
“min”: 4,
“max”: 20,
“step”: 1,
“label”: “Links per column”,
“info”: “Break long drop downs into multiple columns”,
“default”: 10
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “Mega dropdown”,
“settings”: [{
“type”: “text”,
“id”: “menu_item”,
“label”: “Menu item”,
“info”: “Enter a link title from your main navigation”
},
{
“type”: “image_picker”,
“id”: “nav_image”,
“label”: “Featured image”
},
{
“type”: “url”,
“id”: “nav_promo_link”,
“label”: “Featured image link”
},
{
“type”: “select”,
“id”: “image_position”,
“label”: “Image position”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “right”,
“label”: “Right”
}
]
}
]
},
{
“type”: “links_with_images”,
“name”: “Links with images”,
“settings”: [
{
“type”: “text”,
“id”: “menu_item”,
“label”: “Menu item”,
“info”: “Enter a link title from your main navigation”
},
{
“type”: “select”,
“id”: “image_ratio”,
“label”: “Image ratio”,
“default”: “natural”,
“options”: [
{
“value”: “natural”,
“label”: “Natural”
},
{
“value”: “square”,
“label”: “Square (1:1)”
},
{
“value”: “landscape”,
“label”: “Landscape (4:3)”
},
{
“value”: “portrait”,
“label”: “Portrait (2:3)”
}
]
},
{
“type”: “header”,
“content”:“Image 1”
},
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image”
},
{
“type”: “url”,
“id”: “link_1”,
“label”: “Image link”
},
{
“type”: “header”,
“content”:“Image 2”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “Image”
},
{
“type”: “url”,
“id”: “link_2”,
“label”: “Image link”
},
{
“type”: “header”,
“content”:“Image 3”
},
{
“type”: “image_picker”,
“id”: “image_3”,
“label”: “Image”
},
{
“type”: “url”,
“id”: “link_3”,
“label”: “Image link”
}
]
},
{
“type”:“announcement_text”,
“name”:“Announcement text”,
“settings”: [
{
“type”: “richtext”,
“id”: “announcement_text”,
“label”: “Announcement text”,
“default”: “

Share a shop announcement or message

”
}
]
}
]
}
{% endschema %}