Debut Theme Mobile Menu & Search Not Working

Highlighted
Tourist
9 0 0

My site is https://thesteadyhandshop.com/.

Using desktop search and menu work fine but on mobile you click and nothing happenes. Could anyone please tell me what the problem is and how to fix?

Thank you!

Aprile

0 Likes
Highlighted
Shopify Staff
Shopify Staff
102 0 11

Hi Aprile,

Maggie here, Shopify Guru. :) Big knitting/crochet fan!

I have taken a look around your shop, and I see what you mean about the menu on mobile being unresponsive. The likely reason is that there was a code change or an app installation that affected the regular functionality of the theme. The first thing I would recommend is, if you have a developer on staff or someone who has touched the code, to ask them to double check their work.

If there's no one else on the account, you can check yourself by going into Shopify Admin > Online Store > Themes > Actions > Edit Code and then click on the different templates in the left-hand menu of the code editor. You'll see an area at the top of the editor that shows the words "Older Versions" (looks like this) and if you click it, it will show you a drop-down list of any previous versions of the theme (with respect to code changes). You can revert your theme to an earlier date, if there's an option listed, but PLEASE NOTE: if you do this and save it, you will lose any code changes that you've made since the date you're reverting back to. That said, we recommend duplicating your theme first, if you're unsure about what the reversion will do. A clean version of the Debut theme shouldn't be acting like this, so if this doesn't work, there could be another issue going on. Please let me know!

I see that you have another forums post here so I will reply to that one as well in just one moment. :)

You can also contact support 24/7 if you have any more questions.

- Maggie M | Shopify

0 Likes
Highlighted
Tourist
9 0 0

Fixed it. Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
102 0 11

You're very welcome! :)

0 Likes
Highlighted
New Member
3 0 0

Hey Aprile - Would you be able share how you fixed. I have the same issue of the mobile search being hidden behind a fixed header.

Thanks!

Andy

0 Likes
Highlighted
Tourist
9 0 0

Andy,

I followed Maggie's instructions. Saved my new theme then reverted back to my old theme. I implemented my changes one at a time until I had the same issue with the mobile search being hidden. I learned that issue was in the header.liquid file.

I forget exactly what I had to change but this is what my code looks like now in regards to the search.

  <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">
      {% if section.settings.align_logo == 'center' %}
        <div class="grid__item small--hide medium-up--one-third">
          <div class="site-header__search">
            {% include 'search-form' %}
          </div>
        </div>
      {% endif %}

and

      <div class="grid__item small--one-half {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
        <div class="site-header__icons-wrapper">
          {% if section.settings.align_logo == 'left' %}
            <div class="site-header__search small--hide">
              {% include 'search-form' %}
            </div>
          {% endif %}

          <button type="button" class="btn--link site-header__search-toggle js-drawer-open-top medium-up--hide">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

Hope that helps!

Aprile

0 Likes
Highlighted
New Member
3 0 0

Thanks so much for replying! Really appreciated!

Yes, I've tracked the problem down to this code I added to "theme.scss.liquid" to fix the header to the top of the page:

header.site-header {
    padding-top: 0px;
      position: fixed;
    z-index: 999999;
    background-color: #fff;
    
}

Although the header is indeed, now fixed - the downside is that this bit of code also hides the search box on mobile/responsive devices.

I'll have a look through your code to see if anything might help me in sorting my particular issue out more coherently than the workaround I've come up with!

Thanks again :o)

0 Likes
Highlighted
Excursionist
27 2 2

I know it's been a while, but do you remember what you did to fix this problem?

1 Like
Highlighted
Shopify Partner
7 0 1

Having exactly the same problem after changing the dropdown menu to work as a "hovering dropdown menu". How to fix this?

0 Likes
New Member
2 0 0

Did anyone ever figure this out?? I'm having the same issue.

0 Likes