Hello guys,

I hope you are well. Thanks for all the support with your great theme so far.

Previously, I asked for support in making menu items remain white for the current page a visitor is on. You guys gave me some additional CSS to use which worked great. However, since then I have added further items to the menu that are on lower tiers to the other items (page’s) in the menu. So, now when I am on a ‘deep’ page, the menu item remains white, but you cannot see the name of the navigation item for the current page you are on.

Please see screenshot below:

Here is a copy of all the CSS I have used in the site to date:

.main-navigation a {
font-size: 14px;
font-weight: 700;
display: block;
text-decoration: none;
color: #333;
text-transform: uppercase;
font-family: ‘Montserrat’, sans-serif;
}
#masthead .main-navigation ul#primary-menu > li.current-menu-item > a, #masthead .main-navigation ul.nav-menu > li > a:hover, .main-navigation ul#primary-menu li:hover > a, .lite-version #masthead .main-navigation ul#primary-menu > li.current-menu-item > a, .lite-version #masthead .main-navigation ul.nav-menu > li > a:hover, .lite-version .main-navigation ul#primary-menu > li:hover > a, .lite-version #masthead .main-navigation ul#primary-menu ul > li.current-menu-item > a {
color: #ffffff;
}
#masthead .main-navigation ul#primary-menu > li.current-menu-item > a, #masthead .main-navigation ul.nav-menu > li > a:hover, .main-navigation ul#primary-menu li:hover > a, .lite-version #masthead .main-navigation ul#primary-menu > li.current-menu-item > a, .lite-version #masthead .main-navigation ul.nav-menu > li > a:hover, .lite-version .main-navigation ul#primary-menu > li:hover > a, .lite-version #masthead .main-navigation ul#primary-menu ul > li.current-menu-item > a {
color: #ffffff;
}
@media screen and (min-width: 1024px)
@media screen and (max-width: 567px){
.site-branding {
display: flex;
}
.lite-version .main-navigation ul#primary-menu > li:hover > a {
color: #600E3F;
}
.lite-version #masthead .main-navigation ul#primary-menu > li.current-menu-item > a {
color: #ffffff;
}

^^This is all CSS you have given me to get over other issues we resolved earlier in building this site. The only bit off CSS I added above was to make menu items bold (another requirement of my regulators – clear website navigation), all other CSS above you guys have given me previously to get over issues prior.

Please can you let me know if there is any CSS that can be added/removed/updated to the site’s current additional CSS to allow menu item’s TEXT to remain black on menu items that are deeper within the menu as shown on the screenshot above^?

Thanks for all of your great support so far and I look forward to using more of your themes and sharing them with colleagues in the industry who are looking for great themes, with great support teams behind them.

Kind regards,

Baz