Text-decoration: css animation , i would like for the line to slide in -

Store Design
1

i want to add this css animation to navigation menu header . any idea on how to go about this ?https://www.youtube.com/watch?v=0drG9YtoMig

2

i am using brooklyn theme

3

https://7kingdomsbar.myshopify.com/

password godgod24

4

Hi @7kingodmsla ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (min-width: 750px) {
a.site-nav__link:hover {
    text-decoration: none !important;
}
a.site-nav__link:after {
    content: "";
    position: absolute;
    height: 2px !important;
    width: 0;
    background: #fff;
    transition: all .3s;
    bottom: 12px;
    left: 15px;
}
a.site-nav__link:hover:after {
    width: calc(100% - 30px);
}
.site-nav--has-dropdown .site-nav__link:hover:after,
.header-sticky .site-nav__link:hover:after {
    background: #000;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like