Shopify themes, liquid, logos, and UX
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,
Solved! Go to the solution
This is an accepted solution.
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%;}
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.
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,
great thanks i will check and update
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
Thanks
do you have any refresh live hover effect?
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
do you have like this?
https://codepen.io/jstn/pen/zuDst
Hi,
Yes, just like that, but where should I put these codes?
Thanks,
Dip_BC
This is an accepted solution.
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%;}
it's my pleasure to help us
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024