Menu and Submenu not working in mobile version Sense Theme

Shopify Discussion

Topic summary

A Shopify store owner using the Sense theme reports that menu items “Shop” and “Shop By Collection” are not clickable on mobile, preventing access to submenus. Direct links like “Contact” and “FAQs” work normally. Desktop functionality is unaffected.

Root Cause:
The issue stems from missing or improperly structured event handling in the mobile menu drawer. Dropdown menus require specific markup (such as <details> tags with aria-controls and aria-expanded attributes) to function on mobile.

Proposed Solutions:

  • Code injection: Two responders suggested adding custom CSS/JavaScript to theme.liquid after the <head> tag, though the actual code snippets were not visible in one response.

  • Header.liquid modification: Ensure menu items with submenus are wrapped in <details> elements within sections/header.liquid. This allows proper expand/collapse behavior on mobile.

  • Navigation structure check: Verify in Online Store > Navigation that submenu items are properly indented under parent items like “Shop.”

  • Reset to default: Consider using Shopify’s default navigation block, which handles mobile dropdowns automatically.

Recommendation: Test all changes in a duplicate theme first and clear browser cache after implementation.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone, I have no clue what has happened but my menu does not work in mobile.

I am able to click on contact and FAQs but not Shop and Shop By Collection. I can’t access the Sub menus of these either

It works fine on desktop, just not on mobile

Any help would be much appreciated! My site is:

https://thehair-destination.myshopify.com/

pw:erika2024

2

Hi @erikathedesign

Please go to Online Store > Themes > Edit code > open theme.liquid file, add this code after , save the file, reload your page, and check again.

Best Regards,

Dan from Ryviu

3

Hi @erikathedesign

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

Hi @PageFly-Richard

I want to see the code of the solution. But the code is missing from your answer. Im facing the same issue

5

Hello @erikathedesign I checked the mobile version of your site, and here’s exactly what’s going wrong:

Issue:
On mobile view, the menu items “Shop” and “Shop By Collection” are not expandable/tappable — the submenus do not open. However, direct links like “Contact” and “FAQs” work fine.

Likely Cause:
This is usually due to missing event handling or markup conflict in the mobile menu drawer. In the Sense theme, dropdown menus on mobile are toggled via JavaScript and require specific structure (e.g., aria-controls, aria-expanded, details tags).

Simple & Working Fix
We’ll do a light code patch inside the mobile navigation code. Here’s a clean step-by-step guide:

Step-by-step Fix via header.liquid:

  1. Go to Online Store > Themes > Edit Code.

  2. Open:
    Sections > header.liquid

  3. Look for this code block (or similar):

<details class="menu-opening">
  1. Confirm the mobile menu uses the element for expandable menu items. If it does, but “Shop” and “Shop By Collection” aren’t wrapped in (or the inside is missing), they won’t expand.

FIX: Wrap menu items with submenus in properly
Here’s the minimal pattern for mobile submenu support in the Sense theme:

{% for link in section.settings.menu.links %}
  {% if link.links != blank %}
    <details>
      <summary>{{ link.title }}</summary>
      <ul>
        {% for sublink in link.links %}
          <li>
            <a href="{{ sublink.url }}">{{ sublink.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </details>
  {% else %}
    <li><a href="{{ link.url }}">{{ link.title }}</a></li>
  {% endif %}
{% endfor %}

This will ensure any menu item with children (like “Shop”) is clickable and expandable on mobile.

Alternative Quick Fix: Use Shopify’s default menu component
If custom code edits are not feasible, consider resetting the menu to use Shopify’s default navigation block, which automatically handles mobile dropdowns.

  1. Go to Customize Theme

  2. Open the Header section

  3. Ensure you’re using the correct Main menu and not custom blocks

  4. Re-add the navigation menu if needed

Bonus: Test Submenu Structure
Go to:

. Online Store > Navigation

. Check your Main Menu → Make sure “Shop” and “Shop By Collection” have sub-items indented properly under them

Final Tip: Clear Cache or Use Incognito
After editing the theme or navigation, mobile browsers sometimes cache old versions. Clear browser cache or test in an incognito window.

plz try this in duplicate theme first

Thank you :slightly_smiling_face: