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

Store Design
1

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

2

@Dip_BC

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

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

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

3

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

4

Hi @KetanKumar ,

I’ve sent you the password through email.

Thanks,

@Dip_BC

5

@Dip_BC

great thanks i will check and update

6

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

7

Hi @KetanKumar ,

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

Plz check it.

Thanks,

Dip_BC

8

@Dip_BC

Thanks

do you have any refresh live hover effect?

9

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

10

@Dip_BC

do you have like this?

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

11

Hi,

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

Thanks,

Dip_BC

12

@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%;}
13

Hi @KetanKumar ,

Wao, it’s perfect.

Thanks for your help and hard work.

Thanks,

Dip_BC

14

@Dip_BC

it’s my pleasure to help us