Add same animation effect of footer links to the links on customer log in pages

[flammagreg]

Hi guys,

Website: seraneeva.com

I’ve been stuck on this for a while so any help would be greatly appreciated!! Does anybody know how can I replicate the underline animation effect of the links in the footer on the links on the customer log in, create account, and forgot your password pages. I would like to animation effect to be on the links underneath the entries. Pics for reference:

This is the code I used for the underline effect for the links is the accepted solution here: https://community.shopify.com/c/shopify-design/change-underline-effect-of-footer-links/m-p/2592046#M681576

[Arif_Shopidevs]

Hello, I just notice your issue is sovled in your site. If it solved can you mark this post as solved.

Thank you

[EBOOST]

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/theme.min.css
3. Add code below to end of file

.footer-article a{
  display: inline-block!important;
  vertical-align: bottom;
}
.grid__item--customer-accounts .form-vertical a {
   line-height: 1;
}
.footer-article a,
.grid__item--customer-accounts .form-vertical a{
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  animation: none!important;
  background: none!important;
}
.footer-article a:before,
.footer-article a:after,
.grid__item--customer-accounts .form-vertical a:before,
.grid__item--customer-accounts .form-vertical a:after{
    background-color: #000;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}
.footer-article a:focus:after,
.footer-article a:hover:after,
.grid__item--customer-accounts .form-vertical a:focus:after, 
.grid__item--customer-accounts .form-vertical a:hover:after {
    animation-name: _link-slide-out_1t4bw_1!important;
}
.footer-article a:focus:before,
.footer-article a:hover:before,
.grid__item--customer-accounts .form-vertical a:focus:before, 
.grid__item--customer-accounts .form-vertical a:hover:before {
    animation-name: _link-slide-in_1t4bw_1!important;
}
.footer-article a:focus:before,
.footer-article a:focus:after,
.footer-article a:hover:before,
.footer-article a:hover:after,
.grid__item--customer-accounts .form-vertical a:focus:before, 
.grid__item--customer-accounts .form-vertical a:hover:before,
.grid__item--customer-accounts .form-vertical a:focus:after, 
.grid__item--customer-accounts .form-vertical a:hover:after {
    animation-direction: normal!important;
    animation-duration: .8s!important;
    animation-fill-mode: forwards!important;
    animation-timing-function: cubic-bezier(.5,0,0,1)!important;
}
.footer-article a:before,
.grid__item--customer-accounts .form-vertical a:before {
    transform: translate(-100%);
}
.footer-article a:before,
.footer-article a:after{
  background-color: #fff!important;
}

[flammagreg]

You’re awesome, thank you!!! I’m sorry to keep bugging you, but could you add the same underline effect to “Log in” in the menu and write code to have the underline under the “Privacy Policy” be same distance under it as the other underlines in the footer?

[EBOOST]

Hi,

• For “Privacy Policy” → this one has been included in the post code above.

• For Login in the menu. I suggest code below.

.mobile-nav #customer_login_link{
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  animation: none!important;
  background: none!important;
}

.mobile-nav #customer_login_link:before,
.mobile-nav #customer_login_link:after{
    background-color: #000;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}
.mobile-nav #customer_login_link:focus:after, 
.mobile-nav #customer_login_link:hover:after {
    animation-name: _link-slide-out_1t4bw_1!important;
}

.mobile-nav #customer_login_link:focus:before, 
.mobile-nav #customer_login_link:hover:before {
    animation-name: _link-slide-in_1t4bw_1!important;
}
.mobile-nav #customer_login_link:focus:before, 
.mobile-nav #customer_login_link:hover:before,
.mobile-nav #customer_login_link:focus:after, 
.mobile-nav #customer_login_link:hover:after {
    animation-direction: normal!important;
    animation-duration: .8s!important;
    animation-fill-mode: forwards!important;
    animation-timing-function: cubic-bezier(.5,0,0,1)!important;
}
.mobile-nav #customer_login_link:before {
    transform: translate(-100%);
}

[flammagreg]

Thank you so much!!! And for the Privacy Policy, I see the underline’s there but do you know how to make the underline move up a little bit so it’s the same as the other footer links. The underline looks further down on the Privacy Policy.

[EBOOST]

Hi,

I suggest add code below:

.footer-article a {
  line-height: 16px;
  vertical-align: text-bottom;
}

[flammagreg]

Thanks for all the help!!!

[flammagreg]

I promise this is the last thing. Could you do the same underline spacing for the customer account links

[EBOOST]

Hi,

I suggest code below:

.grid__item--customer-accounts .form-vertical a,
.mobile-nav #customer_login_link {
  line-height: 16px;
}