Archived topic
Animated Link Headline - from left to right
6 replies · Started by Rolf on February 28, 2019
Hi, I am referring to this thread: https://generatepress.com/forums/topic/animating-link-underlines-for-main-menu/
I have added the code (first solution posted in the thread) and it works well.
I have a question on how to modify it so the line is not animated from center to left/right but from left to right.
Is this possible?
Hi there,
try this as an alternative:
.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item > a:before {
content: "";
position: absolute;
display: block;
bottom: 1em; /* Smaller or -neg number to move line down */
width: 0%;
height: 2px;
background-color: currentColor;
-webkit-transition: 0.3s width ease;
transition: 0.3s width ease;
}
.main-navigation .menu>.menu-item > a:hover:before,
.main-navigation .menu>.current-menu-item > a:before {
width: calc(100% - 40px); /* 40px offsets the menu item width */
}perfect and thank you!
sorry one more question came up: How to remove the line on the current page.
I used this CSS provided here by the initial solution: https://generatepress.com/forums/topic/animating-link-underlines-for-main-menu/#post-282828
Remove this selectors from both of the CSS rules, don't forget to also delete the , at the end of the previous selector:
.main-navigation .menu>.current-menu-item > a:before
thanks again!
You're welcome
