Problem with header and collection page

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 = `
 PRODUCTS `;​

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