Re: How to make header underline animation?

How can I create a hovering underline animation?

d3X
Tourist
5 0 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

d3X
Replies 8 (8)

theycallmemakka
Shopify Partner
1789 435 462

Hi @d3X ,

 

Can you provide link to your store?

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

d3X
Tourist
5 0 1

Hello,

 

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

d3X
theycallmemakka
Shopify Partner
1789 435 462

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 </body>

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



.header__menu-item:hover span {
    text-decoration: none;
}
</style>

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

d3X
Tourist
5 0 1

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.

d3X

webizito
Shopify Partner
83 5 6

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. 

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com
d3X
Tourist
5 0 1

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
webizito
Shopify Partner
83 5 6
.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

 

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com
d3X
Tourist
5 0 1

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.

d3X