How to do this animation?

Store Design
, ,

Topic summary

A user is seeking help to replicate a specific header animation effect shown in an attached GIF.

A support team member provided CSS code to create a hover effect with black background, white text, and rounded borders on navigation menu items.

The original poster clarified that while the CSS solution looks good, it doesn’t fully match the animated example they provided. They’re uncertain whether the effect requires custom code or a dedicated app.

Another participant confirmed the animation is achievable through custom code.

Current Status: The discussion remains open, with the original poster still seeking either the specific app name or the exact custom code needed to replicate the animation shown in their example.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How do I do this animation in the header? If its an app please tell me which

ezgif-5-dd10b91c12.gif

2

Hi @YassSaddouni

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

nav.header__inline-menu > ul.list-menu > li > a:hover {
    background: black;
    color: white;!;!importan;
    border-radius: 50px;
}
nav.header__inline-menu > ul.list-menu > li > a:hover span.header__active-menu-item {
    color: white;
}

image (65).png
image (65).png1021×229 18.4 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
3

Thank you! It looks great but it’s not quite like the example I provided, the picture I sent is more like an animation, I don’t know if it’s able to be replicated through code or if it is an app, if you know anything please let me know thank you very much

4

This is possible with custom code as well

5

I see, do you have any clue what the app is though?