How can I animate navigation buttons in Craft theme?

Store Design
, , ,

Topic summary

A user seeks help adding an animated underline effect to navigation menu items in the Craft theme, similar to a referenced YouTube tutorial.

Initial Attempts:

  • GemPages support requests the homepage URL for a precise solution
  • Another user (niraj_patel) provides CSS code to paste above </body> in theme.liquid, but the initial code doesn’t work

Resolution:

  • After the user shares their preview URL, niraj_patel identifies missing code from the first attempt
  • Updated CSS targets nav.header__inline-menu ul.list-menu--inline li a with an :after pseudo-element that animates width from 0 to 100% on hover
  • The corrected code includes proper transition effects (width .3s) and removes default text decoration

Outcome:

  • The solution successfully implements the hover animation
  • A Loom video demonstrates the final navigation appearance
  • Issue resolved with the user expressing gratitude
Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hello I am completely new to all of this and I would want to add https://www.youtube.com/watch?v=0drG9YtoMig

this animation to when hovering over a navigation button but I don’t know how to do that

Using Craft theme

2

Hello @Soriks

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the home page link?

3

Hello, @Soriks

Please use this code given below. copy the code and paste above the .

layout → theme.liquid

nav.header__inline-menu ul.list-menu--inline li a { display: inline-block; color: #000; text-decoration: none; } nav.header__inline-menu ul.list-menu--inline li a:after { content: ''; display: block; width: 0; height: 2px; background: #000; transition: width .3s; } nav.header__inline-menu ul.list-menu--inline li a:after { content: ''; display: block; width: 0; height: 2px; background: #000; transition: width .3s; } .header__menu-item:hover span { text-decoration: none!important; }

Navigation look After use this code. see the attached video.

4

I have just tried that but it still don’t work

5

please give me the store URL.

6

https://identityatclothing.com/ the website is currently private but do you want me to make it public?

7

https://identityatclothing.com/password

the website is private at the moment, do you want me to make it public?

8

https://9j5hpljwjrqeb5qq-69823660354.shopifypreview.com

here is the preview

9

@Soriks Sorry, i forgot some code yesterday.

Please firstly, remove the whole code gave by me on yesterday. and paste the new code given below.

nav.header__inline-menu ul.list-menu--inline li a { display: inline-block; color: #e5e5e5; text-decoration: none; } nav.header__inline-menu ul.list-menu--inline li a:after { content: ''; display: block; width: 0; height: 2px; background: #e5e5e5; transition: width .3s; } .header__menu-item:hover span { text-decoration: none!important; } .header__menu-item span { text-decoration: none!important; } nav.header__inline-menu ul.list-menu--inline li a:hover::after { content: ''; display: block; width: 100%; height: 2px; background: #fdfdfd; transition: width .3s; }

after paste the code see the looks of navigation in video (loom link given below)

https://www.loom.com/share/1641b4271612455382fd50b78e3742c4

10

thank you so much, I appreciate it

11

@Soriks

my pleasure :slightly_smiling_face: