[Support request] Underline Animation Effect

Home Forums Support [Support request] Underline Animation Effect

Home Forums Support Underline Animation Effect

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #581833
    Tanner

    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.

    GP Premium 1.6.2
    #581848
    David
    Staff
    Customer Support

    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%;
        }
    }
    #582714
    Tanner

    I see what you did. Thanks!

    #582721
    David
    Staff
    Customer Support

    That’s great, glad i could help!

    #606854
    John

    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

    #606959
    Leo
    Staff
    Customer Support
    #607027
    John

    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

    #607088
    Leo
    Staff
    Customer Support

    Can you paste your full CSS code here?

    #607175
    John

    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%;
    }
    }

    #607473
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #607587
    John

    Hi Leo,

    That solved the problem.

    Many thanks

    Kind regards
    John

    #607717
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.