[Resolved] Animated Link Headline – from left to right

Home Forums Support [Resolved] Animated Link Headline – from left to right

Home Forums Support Animated Link Headline – from left to right

  • This topic has 6 replies, 2 voices, and was last updated 5 years ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #825249
    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?

    #825330
    David
    Staff
    Customer Support

    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 */
    }
    #825362
    Rolf

    perfect and thank you!

    #825368
    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

    #825400
    David
    Staff
    Customer Support

    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

    #825405
    Rolf

    thanks again!

    #825407
    David
    Staff
    Customer Support

    You’re welcome

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.