CSSHTML

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

Rahul Woll
Published: April 21, 2024
What's on this page:
What's on this page:

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).

Shopify Theme CSS

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. With that being said, we recommend duplicate your theme first, if you’re unsure about what is 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 on going.
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. With that being said, we recommend duplicate your theme first, if you’re unsure about what is 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 on going.

Here is the Code for Fix Menu Bar

Copied

    <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

Copied

#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.