Shopify themes, liquid, logos, and UX
Hi,
I'm using Sense Theme and need help in making parent menus with dropdown clickable on mobile.
The parent menus on desktop are clickable but not on mobile. Your help is much appreciated! Thank you.
Solved! Go to the solution
This is an accepted solution.
Hi @kbee,
Please go to header.liquid file, find 'Details-menu-drawer-menu-item-' and change code here:
Code:
<a href="{{ link.url }}" class="menu-drawer__menu-item link--text">{{ link.title | escape }}</a>
Hope it helps!
This is an accepted solution.
Hi @kbee,
Please change code:
<a href="{{ link.url }}" class="menu-drawer__menu-item link--text">{{ link.title | escape }}</a>
=>
<a href="{{ link.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">{{ link.title | escape }}</a>
Hope it helps!
This is an accepted solution.
Hi @kbee,
Please go to header.liquid file, find 'Details-menu-drawer-menu-item-' and change code here:
Code:
<a href="{{ link.url }}" class="menu-drawer__menu-item link--text">{{ link.title | escape }}</a>
Hope it helps!
Hi. Thank you, it worked! I just wanna figure out how to align the menus properly so they don't look like this on mobile.
This is an accepted solution.
Hi @kbee,
Please change code:
<a href="{{ link.url }}" class="menu-drawer__menu-item link--text">{{ link.title | escape }}</a>
=>
<a href="{{ link.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">{{ link.title | escape }}</a>
Hope it helps!
Hi @kbee,
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Have you found solution about Prestige?
Please reply.
I can't find this code now
Hi there,
I have the same issue now but I cannot find 'Details-menu-drawer-menu-item-'. Its 2024 now so I guess there have been some updates to the file and now is a bit different.
Could you please help again with the issue?
Thanks!
Did you find a solution to this? I also don't seem to have that in my code.
Thank you @LitCommerce! This worked for me! The key was to put it in the header-drawer.liquid file for Dawn 14.0.
if you want your subcategories clickable you can follow these steps:
Edit code —-> go to snippets—-> header-drawer.liquid
search for:
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
under this section you'll find this line:
{{ childlink.title | escape }}
replace it with this line:
<a href="{{ childlink.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">{{ childlink.title | escape }}</a>
This worked for me! Thanks so much!
In Dawn 15.1.0 open header-drawer.liquid and replace these lines with the code below.
Line 32: {{ link.title | escape }}
<a href="{{ link.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">{{ link.title | escape }}</a>
Line 44: {{ link.title | escape }}
<a href="{{ link.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">{{ link.title | escape }}</a>
Line 66: {{ link.title | escape }}
<a href="{{ childlink.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">{{ childlink.title | escape }}</a>
This was absolute 🔥. My Lines were in different spots but after playing around was able to make submenu clickable by replacing
{{ link.title | escape }}
with
<a href="{{ childlink.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">{{ childlink.title | escape }}</a>
the key for me was to look find
<details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
I suggest you command, f it
4 lines down you'll find your {{ link.title | escape }} that needs to be replaced.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025