Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Issue with Menu Animation

  • ehewett
    May 13, 2024 at 12:56 pm

    I used the documentation to create a menu animation. https://docs.generatepress.com/article/adding-menu-hover-animation/

    It works great, except it puts the animation on my button link also. Is there a way to exclude the Contact Us button link from the animation?

  • Leo
    May 13, 2024 at 2:52 pm

    Hi there,

    Edit your CSS to this:

    @media (min-width: 769px) {
    .main-navigation .menu > .menu-item:not(.mobile-nav-button) > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        display: block;
        width: 0;
        height: 2px;
        background-color: var(--action);
        transition: 0.3s width ease;
    }

    .main-navigation .menu > .menu-item.current-menu-ancestor:not(.mobile-nav-button) > a::after, 
    .main-navigation .menu > .menu-item:not(.mobile-nav-button) > a:hover::after {
        width: 70%;
     }
}

    Let me know if this helps 🙂

  • ehewett
    May 15, 2024 at 10:03 am 
     -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);

    I had to add that code back in, but it worked great. Thank you!

  • Leo
    May 15, 2024 at 10:40 am

    No problem 🙂

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