Underline Animation On Header (Dawn Theme)

Store Design
, , , , ,
1

Hello! I’d like to add an underline animation on my header like the one on this site.

https://seven7watches.com

My site is: https://prestigestraps.com/ ; password: asd321

2

Follow step by step below:

  1. Select “Edit Code”

luuquangtinh97_0-1687149143174.png
luuquangtinh97_0-1687149143174.png623×409 14.6 KB

  1. Find file called “base.css”

luuquangtinh97_1-1687149202286.png
luuquangtinh97_1-1687149202286.png590×500 24.3 KB

  1. Paste code below in the end of “base.css” file and click “Save” button

luuquangtinh97_2-1687149284272.png
luuquangtinh97_2-1687149284272.png1919×914 54.9 KB

.header__menu-item span{
text-decoration: unset !important;
position: relative;
}
.header__menu-item span:after{
content: '';
height: 2px;
width: 0;
background-color: currentColor;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: width .25s;
transition: width .25s;
}

.header__menu-item:hover span:after{
width: 100%;
}
  1. Refesh page and check result
4 Likes
3

Can you provide the same animation code for the submenu items ? looks like it doesn’t change the animation of underline on the drop-down menu list.