Search Modal - Customer Account Icon not hiding

[Ryanp]

So I recently added  a customer account icon to my header. And was able to position it on the left with no problem. However now when I click to open the search modal you can see the account icon through the modal. And it is also active so it can be clicked.  JUST ON MOBILE. 

Maybe either the search modal is transparent or the account icon is out of order in the theme now..

Could someone please take a look at my site and see if you can offer me any suggestions on how to fix this so the customer account icon disappears like the other icons once the search bar is activated?  I want to move the code to the proper file as well because currently it's actually in the theme editor.. 

Https://devildaves.com

Here is the CSS I have added to the header section to create and position that icon..

h1 {
display: none !important;
}
@media (max-width: 767px) {
.header__mobile-bar {
position: relative;
}
.header__icon--account {
position: absolute !important;
left: 65px !important;
right: auto !important;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: inline-flex !important;
}
}

 

 

[Dotsquares]

Hi @Ryanp 

The issue is that the customer account icon is sitting above the search modal due to its z-index, and since it's not being hidden like the other icons, it's staying interactive even when the modal is open (especially noticeable on mobile).

Here's a fix you can try:
We can hide the .header__icon--account when the search modal is active by targeting the state when the modal is open. Shopify themes typically add a class like search-modal--is-visible to the body or modal wrapper. You can use that to hide your icon temporarily.

Try adding this CSS to your theme (ideally in your main CSS file instead of the theme editor):

@media (max-width: 767px) {
  .search-modal--is-visible .header__icon--account {
    display: none !important;
  }
}

If that class name doesn't work, inspect your site when the search modal is open and check what class is added to the body or surrounding div — you might need to adjust search-modal--is-visible to match your theme's actual class.

Optional: Move the icon code into the right file
Since you're currently adding it via the theme editor, it would be cleaner to move it into the actual theme files:

1. Go to Online Store > Themes > Actions > Edit Code.
2. Find your header.liquid (usually in the Sections folder).
3. Look for the mobile nav bar markup and insert your customer account icon HTML there so it’s part of the structure.
4. Keep your custom CSS in your main CSS file (base.css, theme.css, or similar).

[Ryanp]

Well I tried everything.. I changed out about 8 classes and nothing..  That darn icon is still showing when the Search bar is activated..   I also tried to move the ICon code into the header-drawer.liquid..  Maybe I got it wrong.. Take a look and see if you can tell me what I need to fix in this file..  I may need it all wrapped in the <Div> right??

{% comment %}
  Renders a header drawer menu for mobile and desktop.

  Usage:
  {% render 'header-drawer' %}
{% endcomment %}

<style>
  @media (max-width: 767px) {
    .header__mobile-bar {
      position: relative;
    }
    .header__icon--account {
      position: absolute !important;
      left: 65px !important;
      right: auto !important;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      display: inline-flex !important;
    }
  }
</style>

<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
  <details id="Details-menu-drawer-container" class="menu-drawer-container">
    <summary
      class="header__icon header__icon--menu header__icon--summary link focus-inset"
      aria-label="{{ 'sections.header.menu' | t }}"
    >
      <span>
        {% render 'icon-hamburger' %}
        {% render 'icon-close' %}
      </span>
    </summary>
    <div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">
      <div class="menu-drawer__inner-container">
        <div class="menu-drawer__navigation-container">
          <nav class="menu-drawer__navigation">
            <ul class="menu-drawer__menu has-submenu list-menu" role="list">
              {%- for link in section.settings.menu.links -%}
                <li>
                  {%- if link.links != blank -%}
                    <details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
                      <summary
                        id="HeaderDrawer-{{ link.handle }}"
                        class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
                      >
                        {{ link.title | escape }}
                        {% render 'icon-arrow' %}
                        {% render 'icon-caret' %}
                      </summary>
                      <div
                        id="link-{{ link.handle | escape }}"
                        class="menu-drawer__submenu has-submenu gradient motion-reduce"
                        tabindex="-1"
                      >
                        <div class="menu-drawer__inner-submenu">
                          <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
                            {% render 'icon-arrow' %}
                            {{ link.title | escape }}
                          </button>
                          <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
                            {%- for childlink in link.links -%}
                              <li>
                                {%- if childlink.links == blank -%}
                                  <a
                                    id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                    href="{{ childlink.url }}"
                                    class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
                                    {% if childlink.current %}
                                      aria-current="page"
                                    {% endif %}
                                  >
                                    {{ childlink.title | escape }}
                                  </a>
                                {%- else -%}
                                  <details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
                                    <summary
                                      id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                      class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
                                    >
                                      {{ childlink.title | escape }}
                                      {% render 'icon-arrow' %}
                                      {% render 'icon-caret' %}
                                    </summary>
                                    <div
                                      id="childlink-{{ childlink.handle | escape }}"
                                      class="menu-drawer__submenu has-submenu gradient motion-reduce"
                                    >
                                      <button
                                        class="menu-drawer__close-button link link--text focus-inset"
                                        aria-expanded="true"
                                      >
                                        {% render 'icon-arrow' %}
                                        {{ childlink.title | escape }}
                                      </button>
                                      <ul
                                        class="menu-drawer__menu list-menu"
                                        role="list"
                                        tabindex="-1"
                                      >
                                        {%- for grandchildlink in childlink.links -%}
                                          <li>
                                            <a
                                              id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                              href="{{ grandchildlink.url }}"
                                              class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
                                              {% if grandchildlink.current %}
                                                aria-current="page"
                                              {% endif %}
                                            >
                                              {{ grandchildlink.title | escape }}
                                            </a>
                                          </li>
                                        {%- endfor -%}
                                      </ul>
                                    </div>
                                  </details>
                                {%- endif -%}
                              </li>
                            {%- endfor -%}
                          </ul>
                        </div>
                      </div>
                    </details>
                  {%- else -%}
                    <a
                      id="HeaderDrawer-{{ link.handle }}"
                      href="{{ link.url }}"
                      class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
                      {% if link.current %}
                        aria-current="page"
                      {% endif %}
                    >
                      {{ link.title | escape }}
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          </nav>
          <div class="menu-drawer__utility-links">
            {%- if shop.customer_accounts_enabled -%}
              <a
                href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
                class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"
              >
                {% render 'icon-account' %}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              </a>
            {%- endif -%}
            {%- if localization.available_countries or localization.available_languages -%}
              <div class="menu-drawer__localization header-localization">
                {%- if localization.available_countries and localization.available_countries.size > 1 -%}
                  <noscript>
                    {%- form 'localization', id: 'HeaderCountryMobileFormNoScriptDrawer', class: 'localization-form' -%}
                      <div class="localization-form__select">
                        <div class="visually-hidden" id="HeaderCountryMobileLabelNoScriptDrawer">
                          {{ 'localization.country_label' | t }}
                        </div>
                        <select
                          class="localization-selector link"
                          name="country_code"
                          aria-labelledby="HeaderCountryMobileLabelNoScriptDrawer"
                        >
                          {%- for country in localization.available_countries -%}
                            <option
                              value="{{ country.iso_code }}"
                              {%- if country.iso_code == localization.country.iso_code %}
                                selected
                              {% endif %}
                            >
                              {{ country.name }} ({{ country.currency.iso_code }}
                              {{ country.currency.symbol }})
                            </option>
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                      <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
                    {%- endform -%}
                  </noscript>

                  <localization-form class="no-js-hidden">
                    {%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}
                      <div>
                        <div class="visually-hidden" id="HeaderCountryMobileLabel">
                          {{ 'localization.country_label' | t }}
                        </div>
                        {%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {% endif %}

                {%- if localization.available_languages and localization.available_languages.size > 1 -%}
                  <noscript>
                    {%- form 'localization',
                      id: 'HeaderLanguageMobileFormNoScriptDrawer',
                      class: 'localization-form'
                    -%}
                      <div class="localization-form__select">
                        <h2 class="visually-hidden" id="HeaderLanguageMobileLabelNoScriptDrawer">
                          {{ 'localization.language_label' | t }}
                        </h2>
                        <select
                          class="localization-selector link"
                          name="locale_code"
                          aria-labelledby="HeaderLanguageMobileLabelNoScriptDrawer"
                        >
                          {%- for language in localization.available_languages -%}
                            <option
                              value="{{ language.iso_code }}"
                              lang="{{ language.iso_code }}"
                              {%- if language.iso_code == localization.language.iso_code %}
                                selected
                              {% endif %}
                            >
                              {{ language.endonym_name | capitalize }}
                            </option>
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                      <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
                    {%- endform -%}
                  </noscript>

                  <localization-form class="no-js-hidden">
                    {%- form 'localization', id: 'HeaderLanguageMobileForm', class: 'localization-form' -%}
                      <div>
                        <h2 class="visually-hidden" id="HeaderLanguageMobileLabel">
                          {{ 'localization.language_label' | t }}
                        </h2>
                        {%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {%- endif -%}
              </div>
            {%- endif -%}
            <ul class="list list-social list-unstyled" role="list">
              {%- if settings.social_twitter_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_twitter_link }}" class="list-social__link link">
                    {%- render 'icon-twitter' -%}
                    <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_facebook_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_facebook_link }}" class="list-social__link link">
                    {%- render 'icon-facebook' -%}
                    <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_pinterest_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_pinterest_link }}" class="list-social__link link">
                    {%- render 'icon-pinterest' -%}
                    <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_instagram_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_instagram_link }}" class="list-social__link link">
                    {%- render 'icon-instagram' -%}
                    <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tiktok_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tiktok_link }}" class="list-social__link link">
                    {%- render 'icon-tiktok' -%}
                    <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tumblr_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
                    {%- render 'icon-tumblr' -%}
                    <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_snapchat_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_snapchat_link }}" class="list-social__link link">
                    {%- render 'icon-snapchat' -%}
                    <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_youtube_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_youtube_link }}" class="list-social__link link">
                    {%- render 'icon-youtube' -%}
                    <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_vimeo_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_vimeo_link }}" class="list-social__link link">
                    {%- render 'icon-vimeo' -%}
                    <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </details>
</header-drawer>