Close Nav While Navigating Catalog Page

Hey all,

I have a client website that utilizes Ecwid as their storefront on their catalog page within an iframe. When you navigate the category links within the “Shop” nav dropdown, while on the catalog page, the dropdown stays open. I’ve reached out to Webflow to seek answers but I can’t seem to utilize this script that was given to me:

<script>
let dropdown-links = document.querySelectorAll('a[toggle-menu]')

dropdown-links.forEach((dropdown-link) => {
  dropdown-link.addEventListener('click', () => {
    document.getElementById('menu-toggle').click()
  })
})
</script>

Thanks in advance.

Here is my site Read-Only: Webflow - Witty Wicks

Hi @12gagedesignco,

Welcome to the forum!

Would you be able to send through your live site URL for testing?

Thanks!

Thanks! And absolutely! it’s wittywicks.com

Hi @12gagedesignco,

Working on something, I got pretty close last night (was able to hide but then you’d need to click shop dropdown twice to open again) but will have another look at it soon.

Thank you so much, I really appreciate your help!

Hi @12gagedesignco,

Would you be able to replace your code in Catalog > Page Settings > Custom Code > Before tag with this code:

<script>
let dropdownLinks = document.querySelectorAll('.w-dropdown-list a')

dropdownLinks.forEach((link) => {
  link.addEventListener('click', () => {
    $(".w-dropdown").trigger("w-close") 
  })
})
</script>

This should hopefully do the trick!

Let me know how it goes. :smiley:

This works perfectly! thank you so much!!

1 Like