How to Fix Shopify Debut Theme Menu & Search Function Not Working?

Are you Shopify Store owner? Do you have installed Debut Theme for your Shopify Store? If you have been facing issue with menu & search function not working. This is the solution to all of your issues that you have been facing with your debut theme.

I have taken a look around so many stores built with Shopify. Some of th menu and search function not working on small devices. The reason behind some of the apps override the code which is not allowing menu and search to function correctly.

Solution for Debut Theme Mobile Menu & Search Not Working

If you have a developer on staff or someone who has touched the code, then ask them to double check their work.

If there’s no one else on the account, you can check yourself by logged into Shopify Store.

How to Edit Shopify Theme?

Login to Shopify Store Admin > Click on Online Store > Themes > Actions > Edit Code and then click on the template in the right-hand menu of the code editor.

You’ll see a labelled at the top of the editor that shows the words “Older Versions” and if you click it, it will show you a drop-down list of any previous versions of the theme (with respective code changes).

Here is the Code for Fix Menu Bar

    <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 %}
    </header>

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-headericons{% 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>
    </div>
    

Fix Search Function for Mobile

#header .top_bar .icon-search {
	    z-index: 99;
}

Thank you for reading this.👩‍💻

I hope this will help you to fix your ongoing issues with Shopify Debut Theme. If you have any issue write in comments or email us.