How to add animated underline for footer menu items in Dawn Theme

Store Design
, , , ,
1

Hello guys, I’ve managed to add animation to my header menu, but I really can’t seem to figure out how to apply it to the footer menu/links. I’m sorry I’m new to coding and I still don"t know a lot of things. Would really appreciate if somebody can help. Thank you very much!

2

Hi @TraineeWebDev ,

Could you share me your store URL and the store password (if any)? Then I can review it

3

Hi! Here’s the link to my website. Also, I’ve sent a pm for the password

https://0bbd1c-2.myshopify.com/

4

Hi @TraineeWebDev
How do you want to add the animation for the footer?

5

Hi! I want it exactly like my header menu animations. The underline going in from the left on hover then exits smoothly to the right when you remove your cursor

6

Hi @TraineeWebDev
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.list-menu__item::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 1.2rem;
  right: 1.2rem;
  height: 1px;
  background: rgb(var(--color-foreground));
  transform-origin: right bottom;
  transform: scaleX(0);
  transition: transform .5s ease 0s;
}
.list-menu__item:hover::before {
  transform-origin: left bottom;
  transform: scaleX(1);
  background: rgb(var(--color-foreground));
}
7

It didn’t work for me :disappointed_face: Can you test it in a fresh install dawn theme and try tweaking the footer menu

8

maybe it’s this class?

.footer-block__details-content .list-menu__item–link

9

Hi @TraineeWebDev
Have you added the code? I didn’t see it.
You can try to add this

.footer-block--menu .list-menu__item{
position: relative;
}
.footer-block--menu .list-menu__item::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 1.2rem;
  right: 1.2rem;
  height: 1px;
  background: rgb(var(--color-foreground));
  transform-origin: right bottom;
  transform: scaleX(0);
  transition: transform .5s ease 0s;
}
.footer-block--menu .list-menu__item:hover::before {
  transform-origin: left bottom;
  transform: scaleX(1);
  background: rgb(var(--color-foreground));
}
1 Like
10

Hi @ExpertRookie ! It’s working as expected but the default static underline animation still shows

TraineeWebDev_0-1668436056504.png
TraineeWebDev_0-1668436056504.png240×207 3.07 KB

11

Also it seems kinda short, the animation added is the one above the “Refund Policy”

12

Hi @TraineeWebDev , I would really appreciate it if you would please share the code and instructions for the header and footer animation. I can see you have cracked the solution, but I am still struggling. Many thanks in advance.