Archived topic
Underline Animation Effect
11 replies · Started by Tanner on May 22, 2018
Hi,
I'd like to add an underline animation effect to my navigation bar. I used this code:
@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}
}Couple of things I'm looking to do:
1) Disable the underline for the current page
2) Create a little padding between the text and the underline effect so it isn't right underneath the text
3) Change the underline color to #23efef
4) Have the effect animate to the width of the page word
Any suggestions are much appreciated. Thank you!
~ Tanner G.
Hi Tanner
you can try this - adjusting the line to fit the exact word width is tricky with this method, but as you can see i have adjusted the last property width, which you can adjust to find a sweet spot
@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 8px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: #23efef;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 70%;
}
}I see what you did. Thanks!
That's great, glad i could help!
Hi, I like this very much. I'm looking for a simular option for the sub-menu aswell.
Do you have a solution for this?
Kind regards
John
This post should help:
https://generatepress.com/forums/topic/adding-sub-menu-hover-underline-animation/
Leo,
Many thanks for your answer. It works. One minor thing: In the menu the current item is underlined, but in the sub-menu it isn't. Is there a way to have the current choise underlined in the sub-menu aswell?
Kind regards
John
Can you paste your full CSS code here?
Hi Leo,
Here's the css
Tanks in advance
John
@media (min-width: 769px) {
.main-navigation .menu .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 3px;
background-color: currentColor;
color: #ffcc00;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu .menu-item a:hover::after {
width: 80%;
}
}
Try replacing"
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu .menu-item a:hover::after {
width: 80%;
}with
.main-navigation .menu .menu-item.current-menu-item > a::after,
.main-navigation .menu .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu .menu-item a:hover::after {
width: 80%;
}untested :)
Hi Leo,
That solved the problem.
Many thanks
Kind regards
John
No problem :)
