Hi
I want to change the menu hover effect into another effect.
Can this be fixed on my page?
I will sure thank you all and accept solutions fast they working like a charm. ![]()
See link: I want this effect instead.
A user sought to replace the default underline hover effect on their Dawn theme’s main menu with a different animation style.
Solution Provided:
.header__menu-item span elements with transition animationsassets/base.css file via Theme EditorKey CSS Properties:
:after pseudo-elementsOutcome:
The solution was successfully implemented and the user confirmed satisfaction with the result. The discussion is resolved.
Hi
I want to change the menu hover effect into another effect.
Can this be fixed on my page?
I will sure thank you all and accept solutions fast they working like a charm. ![]()
See link: I want this effect instead.
Hi @Dekanten
To try this code, follow these steps:
.header__menu-item span:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.header__menu-item:hover span:after {
width: 100%;
left: 0;
}
Hey hey, first of all thank u so much for helping me out. This was amazing, glad to see the result being what i wish for. Thank u thank u so much again for this.
Love it. ![]()
Hi @Dekanten
You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.
like and accepting the solution. Thank you!