Change Color (CSS?) of Drop Down Arrow in Primary Navigation

  • Author
  • #145338

    I figured out how to change the color of the text in the primary navigation with CSS, but unfortunately the drop down arrow does not also change color, and the default color is such that it really blends in to any darker color and is really hard to see.

    Does anyone know the CSS to change the color of the drop down arrows to white? The site is if you want to take a look. Here’s what I have used so far for the primary navigation bar:

    /* Control Colors of Masthead */
    .primary-navigation, .primary-navigation .sub-menu {
    background-color: #A30046 !important;

    .primary-navigation li a {
    color: #FFFFFF !important;

    .site-header {
    background-color: #A30046!important;

    The blog I need help with is: (visible only to logged in users)

    Theme Author

    Hi there,

    Please try the following CSS:

    .main-navigation .page_item_has_children>a:first-child:after, .main-navigation .menu-item-has-children>a:first-child:after {
        color: #ffffff !important;
    @media only screen and (min-width: 800px)
        .main-navigation .page_item_has_children > a:first-child:after, .main-navigation .menu-item-has-children > a:first-child:after {
            color: #ffffff !important;


  • The topic ‘Change Color (CSS?) of Drop Down Arrow in Primary Navigation’ is closed to new replies.