[Resolved] Coloring one of the menu options

[Steve]

Hey guys,

I have GeneratePress Premium and I’m wondering if I can customize one of the menu options by putting a border around it or coloring it a different color, like the “Donate” menu option on this website: https://dashdelivers.org/ (This website came from https://generatepressgallery.com) If so, where do I go to change its color?

thanks so much!

[David]

Hi there,

this article explains how:

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

If you get stuck styling the button then let us know 🙂

[Steve]

Thanks David! For Step #2 (Add the CSS), can you let me know where I go to add the CSS in?

Also, I assume that “.main-navigation .main-nav ul li.[This is where you enter in your Custom Class name] a {” Please correct me if I’m wrong.

thanks again!

[Leo]

One of these methods here: https://docs.generatepress.com/article/adding-css/

and Yes 🙂

[Steve]

Thanks Leo! Do you recommend “Simple CSS” or “Additional CSS”? Sorry but I’m new to coding 🙂

[Leo]

Try Additional CSS first 🙂

[Steve]

Awesome, thanks!

[Steve]

Okay I’ve tried the Additional CSS and it works great. Quick question, is there a way to set the hover color for the button? Also, how to make the button appear on tablet/phone navigation menu as well?

thanks again!

[Leo]

You can do this for the hover color:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a:hover {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
    }
}

Mobile will be a bit tricky. Can you link me to the site in question?

[Steve]

Thanks Leo! I put the code in and the hovering works, but the button’s background becomes transparent when I hover over it, when it should be solid. Is there a way to fix this?

[Leo]

Edit the hover CSS to this:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li.menu-button a:hover {
        background-color: #574521 !important;
        border: 2px solid #574521;
        color: #ffffff;
    }
}

How would you want the button to show up?

You can make it show up by removing the @media (min-width: 769px) { } of CSS.

[Steve]

Thanks Leo! I tried both suggestions and it worked great. Final question, on tablet and mobile, is there a way to limit the button color to cover just the length of the text (Just over the word “Contact”). If no then no worries, it’s fine the way it is. Thanks again!

[David]

Hi there,

you can add a display: inline-block; property to your navigation button CSS. The downside of this is that only the ‘button’ is clickable as opposed to the entire row.

[Steve]

Awesome, thanks David!

[David]

You’re welcome

[Author]

Posts