Custom hover and active styling for footer - Horizon

Store Design
,
1

Hi,

I am trying to add custom hover and active styling to my footer.

.menu .menu__item a {
position: relative;
display: inline-block;
padding: 0 4px;
}
.menu .menu__item a::after {
content: “”;
position: absolute;
left: 4px;
right: 4px;
bottom: -2px;
height: 2px;
background-color: #e71d2f;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.menu .menu__item a:hover::after {
transform: scaleX(1);
}

this is the code, it is working for the hover state, but the styling for active link isn’t working.

I want the same underline styling for the active menu link.

Cheers

4

this didnt work unfortunately

5

You need to add the same ::after styling for the active class. Try adding .menu .menu__item a.active::after { transform: scaleX(1); } right after your hover rule. What class does Horizon actually use for the active menu item though, might be something like menu__item--active instead?