[Resolved] Animated Underline

Home Forums Support Animated Underline

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1489717
    Edwin

    Hi

    How to have the same effect for the offside menu (.slideout-navigation)? Taken from post 200801

    https://generatepress.com/forums/topic/animating-link-underlines-for-main-menu/#post-200801

    .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 > a:hover::after {
    width: 50%;
    }

    #1489765
    Elvin
    Customer Support

    Hi,

    You can try this CSS out:

    /* for articles */
    .slideout-navigation.main-navigation .main-nav ul li a{
    	position:relative;
    }
    .slideout-navigation.main-navigation .main-nav ul li a:after {
            content: "";
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            display: block;
            width: 0;
            height: 2px;
            background-color: currentColor;
            transition: 0.3s width ease;
    }
        
    .slideout-navigation.main-navigation .main-nav ul li a:hover:after {
            width: 50%;
    }

    You can change the left, right & translateX() values for its placement. You can also change width:50% if you want longer lines.

    A wise man once said:
    "Have you cleared your cache?"

    #1492565
    Edwin

    Thanks Alvin,

    That is working great!

    #1494706
    Elvin
    Customer Support

    Awesome. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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