Changing colors in the header

[cwillard]

I am trying to change the text color of the lower header bar without also changing the color of the 'My tasks.' When I go to the branding editor, the text in both headers change. How can I change the color of only the text in the lower bar? 

[Susan Britt · Accepted solution]

Here's CSS example you can update in your EC's Theme.

//==Header Menu Items Hover Color (e.g., My Tasks, Favorites, More, Avatar drop-down)
.gt-menu-item>a,
    .gt-menu-item>div>ul>li>a,
    .navbar-nav>li>a,
    .dropdown-menu>li>a,
    .avatar-drop-down>li>a {
      &:hover {
        background-color: #c22037 !important;
        color: #fff !important;
       }
      &:focus { //==Selected menu item background color
        background-color: #c22037 !important;
        color: #fff !important;
       }
}
//== Sub-navbar/Mega Menu font color (from Employee Center Navigation widget)
.main-menu, .level-two-topic-name,.level-one-topic-name, .simple-list, .quick-links-container__title, .quick-link-title, .dropdown-menu-items {
  color: #fff !important;
}
//==Sub-navbar/Mega Menu hover color
.navigation-menu-item, .level-two-topic-name, .level-one-topic-name, .quick-links-container__title, .quick-link-title, .dropdown-menu-items {
  &:hover {
    background-color:  #c22037 !important;
    color: #fff !important;
  }
}
.simple-list {
  li {
    &:hover {
      background-color: #c22037 !important;
       color: #fff !important;
    }
  }
}
//== Sub-navbar/Mega Menu background color of selected menu option (from Employee Center Navigation widget)
.navigation-menu-item.selected-item {
	background-color: #c22037 !important;
    color: #fff !important;
}