Header dropdown menu doesn't work well - how can I fix it?

[crunchmouth]

My header dropdown menu--where I have my collections and subcollections--doesn't work well. It opens a huge dropdown menu bar that covers the width of the screen, and then the dropdown menu disappears half the time when you try to select from it. And if you happen to move your mouse perfectly and it doesn't disappear, you move the cursor all the way to the left side of the screen and you have to select the text for the collection you want (you can't just click on the collection image) in the oversized dropdown menu. How can I fix this? Thank you for any suggestions!

[crunchmouth]

Yes. It is crunchmouth.com I found the issue is when I add an image to the collection. If there is no image, the dropdown looks and works fine. But when I add an image, the dropdown looks bad and acts worse. Just compare "Retro T Shirts" and "Accessories". For example, I don't like the way I can't click on either the image or the text to go to the page. The image under "Accessories" should be labeled "Drinkware", and I can't click on it or any text to access it. Thank you for your help!

[Small_Task_Help]

Hi,

Need to check your backend , seems like Javascript or jquery issue, also need to Simplify HTML and enhance with CSS.

[crunchmouth]

Okay thank you for the feedback. I am hoping for a more simple way to accomplish it. I'm not yet very comfortable with code.

[Benjamen]

Hello 👋

I'm not sure this will help (so just take it with a grain of salt) but Meteor Mega Menu has great support for images (in both mobile and desktop) and is customizable without using code. You can take a look at the demo site, here. 

I hope this helps, at the least it gives you another no-code solution 😊