Changing the appearance of one menu item only

Hi there,
I’d love some help with my site

On the top menu, I’ve changed one of the menu items to a green background using the custom CSS:

#menu-item-7739 {
font-weight: 400;
background: #4fccc3;
border-color: #4fccc3;
padding-left: 10px;
padding-right: 10px;
color: #000000 !important;

However, I’m also trying to change the colour of the text for that menu item to white (so it stands out on the green background). Is there css I can use to target only that menu item and turn it white, while leaving all the other menu items their original colour? Also, is there a way I can remove the ‘fade’ on that menu item only??

Would greatly appreciate some help!

Thank you,

Hey there,
Hope you’re doing well today

The code below, when added to Appearance > Customize > Additional CSS should solve the problem:

#menu-item-7739 a {
    color: white!Important;
    opacity: 1!Important;

Please let me know if that helps.

Best Regards,

That worked perfectly! Thank you so much. I really appreciate the help.


Glad we helped. :slight_smile:

Let us know if you have any other questions in a separate thread.


Will you share how you added the banner at the top of your homepage? Is this a feature of Shapely or a plugin?


Hey @lucretiamcc,
Hope you’re doing well today

I believe she got that banner with this plugin:

I hope this helps :slight_smile:

Best Regards,

Yep that’s exactly right!