[Resolved] Need CSS Help-Navigation

[Kevin]

I’m using the Bold Elementor theme/site library. The navigation/header font is white and requires a background color to be seen. I’d like the nav/menu items to be any other color than white and for the life of me can’t figure out how to change it with either the customizer or CSS edits.

Here are some examples of the problem. This is a staging site, so I can experiment:
Homepage: https://www.staging2.bankingninja.com/ (the menu items can be seen against the blue background)
Regular page: https://www.staging2.bankingninja.com/advertising-disclosure/ (the menu items cannot be seen because the font is white)

I want these types of pages to work like the blogposts and have no idea why the posts are working correctly:
https://www.staging2.bankingninja.com/best-online-checking-accounts/

[Elvin]

Hi Kevin,

I see your site is using a caching plugin. Can you clear cache and temporarily disable it so we could properly check the source of the issue?

Thank you.

[Kevin]

Done.

[Elvin]

It still seems enabled on my end as shown here: https://share.getcloudapp.com/Blu1re1o

Try adding this CSS:

body.page:not(.home) nav#site-navigation .main-nav>ul>li>a  {
color: #515151;
}

Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

[Kevin]

VERY close, as seen on this page: https://www.staging2.bankingninja.com/contact/

However, the CSS code leaves off the last menu item… which is “MORE…”

That last item is a custom URL in the menu.

[Elvin]

However, the CSS code leaves off the last menu item… which is “MORE…”

Add this CSS:

body.page:not(.home) .main-nav>ul>li[class*=current-menu-]>a {
color: #515151 !important;
}

[Kevin]

Thanks. That did it. I really appreciate your help.

[Elvin]

Thanks. That did it. I really appreciate your help.

No problem. Glad to be of any help. 🙂

[Author]

Posts