How do I change the colour of the dropdown arrow in the nav?

Glad you figured it out and thanks for posting the solution in case it helps others.

Hi,

I just saw your post and i was so happy because i’m looking for this issue since yesterday… BUT it doesn’t work. Or maybe i don’t understand how to do it but i want to change the color’s menu and i can’t find the

.navigation-classic .primary-navigation .menu-item-has-children:before {
color: #DESIREDCOLOUR;
}

.navigation-classic .primary-navigation .menu-item-has-children:before:hover {
color: #ffffff;
}

in the CSS code. I even tried to add this (with my color of course) but nothing happened. So, maybe you can help me ?

Also, if you can answer these questions…:
– how to make bigger the social icons
– how to make less height the image of the front page
– do you know if there is a filter that we can remove on the front page’s image because it looks like darker that my original RGB image.

Thank you thank you thank you !

PS : sorry if my english is not well… (french girl)

Hi @chrismicrob, If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

Jetpack plugin
Child Themes
Child Theme creation plugins
Custom CSS plugins

To change the small down arrow in the center of the square in the lower section of the menu (below the full-width line), add the following CSS and edit.

.primary-navigation .dropdown-toggle:before {
color: #cc0000;
}

To change the color of the border on the square, add this and edit.

.primary-navigation .dropdown-toggle {
border-color: #66dd33;
}

If you wish to change the hover color of the square, add this and edit.

.primary-navigation .dropdown-toggle:hover {
background: #ddaa33;
}