Why isn't my main menu link functioning after adding a drop down menu?

[chloeefisher]

the shop link in my main menu navigation will no longer click through after adding a drop down menu. it is linked to my "all collections" page, but when clicking on the "shop" tab, it only shows the drop-down menu. I am thinking this may be because of the theme but I would love the have the drop down menu show up when hovering the link and be able to click the link to get to a collections page. Is this something that's possible?

website:

chloefisherceramics.com

[GemPages]

Hello @chloeefisher ,

It's GemPages support team and glad to support you today.

Could you please share your store password then I can see and suggest something for you?

Best regards,
GemPages Support Team

[chloeefisher]

yes! password is: potsandstuff

[BSS-Commerce]

Hi @chloeefisher 

Can you kindly share with us your store password? Then, we will check and suggest you a solution if possible.

[chloeefisher]

yes, thank you! the password is: potsandstuff

[BSS-Commerce]

Hi @chloeefisher 

Please follow these steps:

- Step 1: At Shopify Admin, select Online Store -> Themes -> Edit Code

- Step 2: Find and open the theme.css file and add the following code at the end of the theme.css file:

#Details-HeaderMenu-2 > .header__submenu {
    animation: animateMenuOpen var(--duration-default) ease;
    animation-fill-mode: initial;
    z-index: -1;
}

#Details-HeaderMenu-2:hover > .header__submenu {
    animation-fill-mode: forwards;
    z-index: 1;
}

- Step 3: Find and open the theme.liquid file, add this code before the </body> tag, like this:

<script>
   let btn = document.getElementById("Details-HeaderMenu-2");
   btn.onclick = function(e){ 
      e.preventDefault(); 
      window.location.href = "https://chloefisherceramics.com/collections/all";
   }
</script>

I hope that it will work for your site.