[Resolved] nav links effect on secondary navigation

Home Forums Support [Resolved] nav links effect on secondary navigation

Home Forums Support nav links effect on secondary navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #453266
    Roland

    Hi there,

    I added the nav links effect to the main menu using this code:

    /* Menüpunkte unterstreichen - nav links effect - von generatepress.com */
    @media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        color: #FF9034;
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    
        display: block;
        width: 0;
        height: 1px;
    
        background-color: currentColor;
        transition: 0.5s width ease;
        }
    }
    
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }

    Any idea how I can apply this effect to the secondary navigation too?

    Roland

    #453301
    Leo
    Staff
    Customer Support

    Hi there,

    Try replacing all the .main-navigation with .secondary-navigation

    Let me know.

    #453337
    Roland

    Hi Leo,

    that’s exactly what I tried before:

    /* Menüpunkte des zweiten Menüs unterstreichen - nav links effect - von generatepress.com */
    .secondary-navigation .menu > .menu-item > a::after {
        content: "";
        color: #FF9034;
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    
        display: block;
        width: 0;
        height: 1px;
    
        background-color: currentColor;
        transition: 0.5s width ease;
        }
    
    .secondary-navigation .menu > .menu-item.current-menu-item > a::after,
    .secondary-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }

    But it doesn’t work …

    Perhaps a misspelling I don’t see?

    Roland

    #453412
    Leo
    Staff
    Customer Support

    Ahh give this a shot:

    @media (min-width: 769px) {
        .secondary-navigation .secondary-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;
        }
        .secondary-navigation .secondary-menu > .menu-item.current-menu-item > a::after,
        .secondary-navigation .secondary-menu > .menu-item > a:hover::after {
            width: 50%;
        }
    }
    #453891
    Roland

    Hi Leo,

    that’s it. Works fine.

    Thanks a lot
    Roland

    #454135
    Leo
    Staff
    Customer Support

    No problem!

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