Adding Underline animation on hover to Site-nav links in Venture

[Dip_BC]

Hi,

I'm using Shopify Venture theme. I want to add underline animation to the Site-nav links on hover.

Is there anybody to help me out.

Thanks,

@Dip_BC 

[KetanKumar]

@Dip_BC 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Dip_BC]

Hi @KetanKumar,

Here is my Site URL : https://bleucentral.com/

It's password protected. I'll be sending the password through e-mail to you.

Thanks,

@Dip_BC 

[Dip_BC]

Hi @KetanKumar,

I've sent you the password through email. 

Thanks,

@Dip_BC 

[KetanKumar]

@Dip_BC 

great thanks i will check and update

[KetanKumar]

i have  checked not 2 hover effect menu item can you please remove first both are after let me know i sill give proper code

[Dip_BC]

Hi @KetanKumar,

I've removed the existing hover effects, as you told.

Plz check it. 

Thanks,

Dip_BC

[KetanKumar]

@Dip_BC 

Thanks 

do you have any refresh live hover effect?

[Dip_BC]

Hi,

Actually I've removed all the customised hover effects. 

Now whatever is default, is there and I don't know how to remove it.

Thanks,

Dip_BC

[KetanKumar]

@Dip_BC 

do you have like this?

https://codepen.io/jstn/pen/zuDst

[Dip_BC]

Hi, 

Yes, just like that, but where should I put these codes? 

Thanks,

Dip_BC

[KetanKumar · Accepted solution]

@Dip_BC 

thanks for confirming please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-nav__link {position: relative;}
a:hover, a:focus, .link-accent-color:hover, .link-accent-color:focus {color: #fff;}
.site-nav__link::after {
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    background: #fff;
    content: "";
    left: 0;
    right: 0;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    margin: 0px auto;
}
.site-nav__link:hover::after { width: 100%;}

[Dip_BC]

Hi @KetanKumar,

Wao, it's perfect.

Thanks for your help and hard work.

Thanks,

Dip_BC

[KetanKumar]

@Dip_BC 

it's my pleasure to help us