[Resolved] Animated Link Headline – from left to right

[Rolf]

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?

GeneratePress 2.2.2

[David]

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 */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rolf]

perfect and thank you!

[Rolf]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rolf]

thanks again!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts