Change color for top menu dropdown arrows

Hey dear colorlib Support,
I would like to change the color of the dropdown arrows on the main menu in Shapely theme. I managed to change the text color of the menu items, but the arrows are still unchanged, and since I’m using a background color for the container, they can hardly be seen now. Can’t figure out the CSS for that. Can you help?

Thanks in advance :slight_smile:

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the drop-down color by going to Appearance > Customize > Additional CSS and pasting it there.

.dropdown:after { color: red; }

Best Regards,
Support

Thanks, it worked fine :slight_smile: Now the hover color is still bad, and I couldn’t manage to figure this one out myself…what’s the CSS for the arrow-hover-color? Then everything is perfect :slight_smile:

Have a great day!

Hello there,

For the hover, please try the following:

.dropdown:after:hover { color: red; }

Best Regards,
Support

Hey,

I have already tried that before, but it doesn’t work. The arrows seem to take the same color as specified in the hover settings of the sub menu text. With the code provided above, simply nothing happens, like it would not affect the arrows.

Hello there,

This should do it.

/*Hover menu text color*/ .main-navigation .menu li a:hover, .main-navigation .menu li:hover > a, .main-navigation .menu > li:hover:after { color: red; }

Best Regards,
Support

Did it :slight_smile: Perfect, thanks!