Problem with header and collection page

[CreatorTim]

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

[CreatorTim]

Hey, I emailed you about this, please take a look.

[CreatorTim]

Just sent it again, check it out