Modifying the link color for a specific menu item on a drop down

[ccwadsworth]

Hello!
Not sure if this is possible, but I would like to change the colors of the links on the Programs menu dropdown on this website: https://www.tenwomenstrong.net/
I would like the Women In Agile Programs hover to be #2a68a5
And the links under that submenu to be #339999
Is that possible?

Appreciate your help, thank you!

[Prasant]

Hello @ccwadsworth,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

li#menu-item-1291 a:hover {
    color: #2a68a5;
}

li#menu-item-1292 a:hover, li#menu-item-1293 a:hover {
    color: #339999;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[ccwadsworth]

This is great Prasant, thank you!

It looks like I need a little bit more refining…
I realized I wasn’t very clear in my question…

Can you help me with this?

I would like the Women in Agile Programs link and all submenu colors to be blue — #2a68a5
and all of their hover colors to be teal — #339999

Is that possible??
I’ve added a 3rd submenu level too.

Thank you so much!
I appreciate your help!

[jade]

Hi @ccwadsworth,

Thanks for clarifying.

You can add a class to the Women in Agile Programs menu item then add a custom CSS to its color and its submenu items color and hover color.

To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class highlight to the menu item.

Once the menu is saved, go to X > Theme Options > CSS then add this code:

.x-navbar .desktop .x-nav li.highlight a {
    color: #2a68a5;
}

.x-navbar .desktop .x-nav li.highlight a:hover {
    color: #339999;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[ccwadsworth]

BRILLIANT! Perfect! Thank you so much!

[Prasant]

You are most welcome.