How Do I Make the Primary Navigation Do This?

[Robin]

Hey there – I trust support members are keeping well.

I want one link in my primary navigation to have a different colour as well as when you hover over it.

It’s the DONATE link I want to make stand out.

How do I do that?

TIA, Robin

[David]

Hi Robin – very well thanks hope the same goes for you.

You can add a Custom CSS Class to that menu item:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

E.g adding Custom Class of: donate-menu

And then use it to style that item differently:

.main-navigation .main-nav ul li.donate-menu a {
    background-color: red;
}

.main-navigation .main-nav ul li.donate-menu:hover a {
    background-color: blue;
}

Useful topic:
https://docs.generatepress.com/article/adding-buttons-navigation/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Robin]

Perfect! Thanks so much, David. And yes, all good around here.

[David]

You’re welcome – glad to hear it

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts