Shopify themes, liquid, logos, and UX
Hi, I have a menu item "PRODUCTS" and a sub-menu item under it. (Want this only for mobile)
Right now, when I click directly on the "PRODUCTS" heading, it takes me to the collection page, but if I click anywhere else in the "PRODUCTS" line, it takes me to the next page with the sub-menu item.
I want to reverse this so that if I want to go to the sub-menu item, I only need to click on the arrow. And if I click anywhere else in that line, it will take me to the collection page.
Here’s the code I used to make the "PRODUCTS" heading clickable and redirect to the collection page:
document.getElementById('HeaderDrawer-products').innerHTML = `
<a href="/collections/all"> PRODUCTS</a> <span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-arrow" viewBox="0 0 14 10"><path fill="currentColor" fill-rule="evenodd" d="M8.537.808a.5.5 0 0 1 .817-.162l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L11.793 5.5H1a.5.5 0 0 1 0-1h10.793L8.646 1.354a.5.5 0 0 1-.109-.546" clip-rule="evenodd"/></svg></span><span class="svg-wrapper"><svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"/></svg></span>`;
Here’s my store URL: https://1049xn-ya.myshopify.com/
Here’s a store where it works the way I want: https://tomnoske.store/
THIS IS ONLY FOR MOBILE
Thanks a lot,
Tim
Hey, I emailed you about this, please take a look.
Just sent it again, check it out
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