Hey guys,
How can I add a hover effect to the header on products?
I don’t want anything complicated. Just a simple hover effect for the products only.
Just like this:
Here’s the link to my store: 1049xn-ya.myshopify.com
Thank you,
Tim
Topic summary
Goal: add a simple hover-triggered dropdown under the header’s “Products” menu item that lists all individual products for quick navigation.
- Current behavior: hovering “Products” makes the label bold and shows a black dot beneath it. The requester wants to keep this effect.
- Desired change: when hovering “Products,” a small dropdown should appear listing every product, allowing a direct click-through to each product page. The look and behavior should match the example site provided.
References provided:
- Store URL for context and testing.
- Example implementation: tomnoske.store.
- Multiple screenshots illustrating the intended dropdown design (images are central to understanding the desired UI).
Latest update: support asked how the user wants to modify the existing hover state. The user clarified requirements (keep current bold/dot, add dropdown of all products) and followed up requesting progress.
Status: no solution or implementation steps shared yet; awaiting guidance on how to configure (theme settings vs. custom code) to produce a hover dropdown that lists all products under “Products.”
Hi @CreatorTim
We have checked on your query. Currently, when you hover over this area, the text appears bolder, and there is a black dot underneath. How would you like to modify this?
We will assist you further.
Hi @LizHoang ,
Yes, when I hover over the products, a black dot and bold text appear. I want to keep that as it is.
I’d just like to add an effect where, when I hover over “Products,” a small dropdown menu appears underneath, showing all my products. This way, I can simply click on a product and be redirected to it.
Exactly like this:
And if needed, here’s the link to a store that shows how I want it to look the same on mine.
Thank you,
Tim
Hey, are you here? Are we still in contact?
Yes, when I hover over the products, a black dot and bold text appear. I want to keep that as it is.
I’d just like to add an effect where, when I hover over “Products,” a small dropdown menu appears underneath, showing all my products. This way, I can simply click on a product and be redirected to it.
Exactly like this:
And if needed, here’s the link to a store that shows how I want it to look the same on mine.
Thank you,
Tim