[Matt VParticipant]

I can’t seem to figure out how to do two things:

1) I would like to change the color of the breadcrumbs text that is currently set to white to Black.

Image: https://www.dropbox.com/s/v151fonzi9ntrde/breadcrumb.png

2) I would like to change the active link color text in the sub menu navigation to Black.

Image: https://www.dropbox.com/s/4u1nnfxu65zbyh6/subnav.png

Thanks in adavance for your help

[ChristianModerator]

Hey Matt,

Please change your Site Links color in Customizer > Typography (see http://prntscr.com/3rom9d).

Hope that helps. 🙂

[Matt VParticipant]

Actually it is more complex than that. I have everything set to white via the Customizer but I want to make some additional customizations for only the locations mentioned above. You can see what I mean by looking at the images above or by visiting http://www.governorsclub.com

I want the main navigation site links to be White (as set in the customizer) but I want the two locations mentioned above to be white.

I know I need some additional CSS but am not sure of the exact coding. Here is what I have used so far.

.home-tab-img {
display: block;
margin-left: auto;
margin-right: auto;
}

.x-navbar {
background-color: #000000;
border-bottom: 1px solid #004600;
}

.x-navbar .sub-menu {
background-clip: padding-box;
background-color: #000000;
}

.h-custom-headline {
letter-spacing: -1px;
line-height: 1.2;
}

.x-navbar .sub-menu li > a:hover {
color: #FFFFFF;
background-color: black;
}

[Ying-FuParticipant]

You may try this to change the breadcrumbs:

.x-breadcrumbs a {
color: #7B8492 !important;
}
.x-breadcrumbs a:hover {
color: #435063 !important;
}
.x-breadcrumbs {
padding-left: 4px;
background-color: #ECEEEF;
font-size: 1.3rem;
font-weight: 600;
color: #435063;
letter-spacing: 1px;
line-height: 2.3;
text-transform: uppercase;
}
x-recent-posts
a:hover,
.x-icon-home:hover {
color: #435063;
}
.x-icon-home {
color: #7B8492;
}

I have done this site-wide (http://alcast.nl) in the Customizer CSS but I guess you could use the custom CSS per page for this.

[Matt VParticipant]

Awesome. Thanks! That works for the words but for some reason it is not taking the color for the arrow icon between words. Any ideas?

I also figured out the appropriate CSS for the nav sub menu highlighting issue:

.x-navbar .sub-menu .current-menu-item > a {
background-color: #004600;
}

[Ying-FuParticipant]

The arrows take their color from this:

.x-icon-home {
color: #7B8492;
}

[ChristianModerator]

Thanks for helping out Ying. Hope that helps Matt. 🙂

[Author]

Posts