Change Header Navigation Button Color in WooCommerce Store

Hi there X-Themers,

I’m struggling to find a way to change my header navigation buttons on my store so that they’re all visible against the white background on this page:

I tried adding this to create contrast but that didn’t work:

.x-navbar {
background-color: #000000;}

Any ideas? Sorry to bother you with something so trivial but I couldn’t seem to get anything to work in the additional CSS area.

Please advise,


Hello @InvariablyGarett,

Thanks for asking. :slight_smile:

I see that you are using Pro Theme and the default navigation system. If you want to change the navigation links color then the same can be done from Pro > Theme Options > Header > Links - Texts > Navbar Links.

To learn more about various options that Pro Theme offers, please take a look at our KB articles and videos:


Is there a way to do it on the WooCommerce store only though?

Hi There @InvariablyGarett

Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area.

.woocommerce .x-navbar .desktop .x-nav > li > a, .woocommerce .x-navbar .desktop .sub-menu li > a, .woocommerce .x-navbar .mobile .x-nav li a {
    color: red;

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.