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!
Topic summary
Main issue: the header dropdown (collections and subcollections) becomes a full-width mega menu that often disappears when navigating, and only the text is clickable, not the images. The problem occurs specifically when collection images are added; without images, the dropdown looks and functions correctly.
Symptoms and examples: comparing Retro T Shirts (works without images) to Accessories shows the issue. The Accessories image intended as Drinkware is not clickable, and navigation is unreliable.
Proposed causes: possible JavaScript or jQuery conflict, with a need to simplify the HTML structure and improve CSS. jQuery is a JavaScript library commonly used in Shopify themes.
User constraints: prefers a simple, no-code approach and is not comfortable editing code.
Suggested solution: try a no-code menu app, specifically Meteor Mega Menu, which supports images on desktop and mobile and is customizable without coding. A demo was provided.
Status: unresolved. Next steps are either to debug theme code in the backend (JS/CSS/HTML) or adopt a third-party mega menu app. No confirmation of a fix yet; discussion remains open.
Hi,
Need to check your backend , seems like Javascript or jquery issue, also need to Simplify HTML and enhance with CSS.
1 Like
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!
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.
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 