Shopify Theme Development

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).Shopify Theme CSS

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

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

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.

Digital Marketing Shopify Development Shopify Stores Development

Rahul Sharma

Rahul Sharma is a Founder of Logical IDEA and Bee Flirty. He is a Professional WP Developers, UX Designer, and Digital Marketing Expert. Previously, He Worked as a Digital Marketing Head for An eCommerce Startup. He Graduated with honors from Lovely Professional University with a Dual Degree in Information Technology.

125 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts