[Support request] dynamic menu button

[Cynthia]

Is there a way within GP to create a dynamic hover effect for the menu buttons as shown in this website: https://anchorcm.net/

[Fernando]

Hi Cynthia,

There’s a way but you’ll need custom CSS.

If you can provide the link to your site, we can try to help with the CSS needed.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Cynthia]

I hadn’t started building my new site but my question applies to any website that I would build or have already built. Wouldn’t the css you provide apply to any site?

If you could provide the css so that the menu buttons have the same hover effect that are on this site >>>> https://anchorcm.net/
that would be great!

I have provided one of my websites that I designed in the private field so I can test the css you provide on it.

Thank you

[Ying]

Wouldn’t the css you provide apply to any site?

It’s usually not the case, we write CSS based on the site.

Try this, it should work for most GP sites.

.main-navigation .main-nav >ul > li:before {
    content: "";
    width: 0;
    position: absolute;
    left: 50%;
    top: 78%;
    background-color: orange;
    height: 2px;
    transition: 0.4s all ease;
}

.main-navigation .main-nav >ul > li:hover:before {
    left: 20px;
    width: calc(100% - 20px - 20px);
}

.main-navigation .main-nav >ul > li {
    position: relative;
}

[Cynthia]

It IS actually working on all of my client sites. Thank you !!

[Cynthia]

It IS actually working on all of my client sites. Thank you !

However is there a way to not have the effect applied to the mobile navigation while keeping the effect on the desktop?

[Fernando]

Cynthia,

Yes, there’s a way.

Try this code instead:

@media (min-width: 1025px) {
    .main-navigation .main-nav >ul > li:before {
        content: "";
        width: 0;
        position: absolute;
        left: 50%;
        top: 78%;
        background-color: orange;
        height: 2px;
        transition: 0.4s all ease;
    }

    .main-navigation .main-nav >ul > li:hover:before {
        left: 20px;
        width: calc(100% - 20px - 20px);
    }

    .main-navigation .main-nav >ul > li {
        position: relative;
    }
}

I just added an @media query to Ying’s code to allow it to take effect only on Desktop view.

[Author]

Posts