How can I create a hovering underline animation?

Store Design

Topic summary

Goal: replicate a smooth hover underline on header menu links (like akiufotografija.lt), with a persistent underline for the active page.

What was tried:

  • Store link shared for context. Initial CSS using span::after on .header__menu-item added. It shows an underline but it renders below the header, lacks a smooth fade-out, and causes the header to shift on hover.
  • Additional guidance to add code near in theme.liquid was suggested (details not provided in the snippet).
  • Revised CSS provided: sets hover underline via ::after, adds an active state (header__active-menu-item) with a different color, and applies positioning/transition changes.

Current issues:

  • Underlines (blue hover and red active) still appear below the header on hover; the active red line disappears when the cursor leaves, and the animation isn’t smooth. There is also interaction between hover and active states causing glitches.

Notes:

  • Screenshots and CSS code snippets are central to understanding the problem and attempted solutions.
  • No final resolution yet; further CSS adjustments are needed to fix positioning context, transitions, and persistent active state behavior.
Summarized with AI on January 2. AI used: gpt-5.
1

Thanks in advance!

Can anyone help me, how to make the same hovering underline animation like on this site? https://akiufotografija.lt/

d3X_0-1711168777765.png

1 Like
2

Hi @d3X ,

Can you provide link to your store?

3

Hello,

Here is a link to my store: https://a4a976-e1.myshopify.com/

4

Hello @d3X

.header__menu-item span:hover::after{
    opacity: 1;
    bottom: -8px;
}
.header__menu-item span::after{
    opacity: 0;
    position: absolute;
    content: "";
    bottom: -15px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #2893ff;
    transition: all .2s;
    pointer-events: none;
}

Please add this css in your css file.
Thanks.

5

Hi, it doesn’t work as it should. The hovering animation is below the header, somehow. + I want an animation that after you click on one of the pages, the effect stays on it, like that:

d3X_1-1711174568800.png

Here is the view, how it looks after I’ve pasted the code in base.css

d3X_0-1711174475771.png
d3X_0-1711174475771.png1911×112 11.8 KB

6

Hi @d3X

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

7

Thanks, the hovering animation works, but not as smooth as it should + there’s only 1 part of the animation, because when i move my mouse away from it, the animation just dissapears without any fade. In https://akiufotografija.lt/ it looks more clean, when hovering on it. And somehow, my header moves, when the hovering animation starts. By the way, can you also help me with the hovering animation, that after you click on one of the pages, the effect stays on it, like that:

d3X_0-1711175781325.png

And that both animations wouldn’t glitch on top of the other.

8 
.header__menu-item span:hover::after{
    opacity: 1;
    bottom: -8px;
}

.header__menu-item span::after{
    opacity: 0;
    position: absolute;
    content: "";
    bottom: -15px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #2893ff;
    transition: all .2s;
    pointer-events: none;
}
.header__menu-item:hover span{
	display: block;
    position: relative;
    text-decoration: none;
    transition: .2s;
}
span.header__active-menu-item::after{
    opacity: 1;
    bottom: -8px;
    background-color: #ff6355;
}
.header__active-menu-item{
 	text-decoration: none;
 	text-underline-offset: unset;
 	display: block;
}

Repalce and add this css.

webizito_0-1711176159213.png
webizito_0-1711176159213.png1483×286 21.4 KB

9

It still shows lines (blue and red ones) below the header, when hovering, somehow and the red line dissapears when i hover away from it. The red line should stay.