Adding a hover effect to the header

Store Design
, ,
1

Hey guys,

How can I add a hover effect to the header on products?

I’ve already added the sub-menu item, so I just need the animation now.

I don’t want anything complicated. Just a simple hover effect for the products only.

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.

Here’s my store URL: 1049xn-ya.myshopify.com

And here’s how I want it to look:

CreatorTim_0-1734016402590.png
CreatorTim_0-1734016402590.png400×157 26.9 KB

And if needed, here’s the link to a store that shows how I want it to look the same on mine.

https://tomnoske.store/

Thank you,
Tim

2

Hi,

With Dawn theme you can go to Admin → Online Store → Themes → Customize Code → sections/header.liquid then add code to that to end of file.
3

Hey, thanks, it works, but I’d like to adjust the design.

Here’s how it looks now:

CreatorTim_1-1734105119610.png
CreatorTim_1-1734105119610.png536×296 16.2 KB

And this is how I’d like it to look:

CreatorTim_2-1734105152757.png
CreatorTim_2-1734105152757.png541×325 44.6 KB

So, I want:

  1. Remove the underline when I hover over it, I just want to keep my dot.
  2. Remove the little arrow that’s on the right of it.
  3. Then adjust the design to match the photo.

here’s the link to a store that shows how I want it to look the same on mine: https://tomnoske.store/

Thanks,
Tim

4

I’m happy when my solution helpful to you, so you can pls give me a like and make suggest is accepted, thanks!

5

Hi, of course, I’ll give you a like and rating.

But I need help with a few adjustments.

I found that when I hover over “Products,” the menu appears as expected, but when I try to click just on “Products” to take me to the product overview, the menu closes. So, it works on hover, but also on click.

I want it to only work on hover, and I don’t want it to work on click. Plus, I want that when I click on “Products,” it takes me to the product overview.

The second thing I want is to add a smooth animation effect, so when you hover over it, it slides out nicely—exactly like it does here when you hover over the store: https://tomnoske.store/

Here’s the URL of my store: https://1049xn-ya.myshopify.com/

Once we resolve this, I’ll leave you a review.

Thanks a lot,
Tim

6

doesnt work