Menu font color on different pages

Hello!

I’m wondering if it’s possible to make the Menu font different colors on different pages? E.g. on screengrab 1 the background is dark, so I want the Menu font to be white (showing here, “Home,” “Shop,” “Cart,” “Contact”). On screengrab2, the background is white, so I want the same menu items to appear but for the font to be black so the menu items appear (they are there but in white font currently, so invisible!)
Thank you very much!
Cailley


Hello there,

Try the below CSS code and add to Appearance > Customize > Additional CSS from dashboard.

    .page-id-51 #mainnav ul.menu > li > a {
      color: #ff0000;
    }

Replace the ID number on .page-id-51 with your page’s ID. You can easily get it with this plugin: https://wordpress.org/plugins/reveal-ids-for-wp-admin-25/.

Regards,
Kharis

Thanks Kharis! I used the code and found the page ID using the plugin you recommended, but it doesn’t seem to have worked. Not sure! Here is my page:

Cheers,
Cailley

Hello Cailley,

Did you use .page-id-49? What is your complete code?

Regards,
Kharis

I used .page-id-2602 because that’s the code of the shop page?

Hello there,

Try this code for shop archive page.

    .post-type-archive-product #mainnav ul.menu > li > a {
      color: #ff0000;
    }

Regards,
Kharis

That worked, thanks so much! I also want to lower the menu on the Shop page. I believe the custom css code that I’ve used to remove the header logo from the shop page is perhaps interfering with the menu’s placement. The code is:

body:not(.home) .site-header .col-md-4 a {
  display: none;
}

Could you help?
Thank you!
Cailley

Hello there,

Try adding this CSS code:

    .post-type-archive-product #mainnav ul.menu > li {
      margin-top: 20px; 
    }

Regards,
Kharis

Works like a charm, thank you for your help Kharis!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

Apologies for one more question on this topic. I realized I want to also change the font color of the navigational menu on all the pages other than the main page. You helped me change the menu’s font color on the shop page.

Could you explain to me how I would add and change the custom css code you gave me, so it will also change the font color on the cart andcontact pages, as well as the shop page?

    .post-type-archive-product #mainnav ul.menu > li > a {
      color: #000;
    }

Would I simply change it to:

    .post-type-archive-**_cart_** #mainnav ul.menu > li > a {
      color: #000;
    }

I’m looking to change the menu font color to black on every page besides the front page, where it is white.

http://stone.joshschuyler.com/
Thank you many times over!
Cailley

Hello Cailley,

For contact page which has unique body class name .page-id-2237, you could use this code:

    .page-id-2237 #mainnav ul.menu > li > a {
       color: #ff0000;
    }

You can get it with the web browser’s inspector tool. Or use Reveal IDs plugin to get to know the exact ID number of your pages.

For cart page, use this one:

    .page-id-2603 #mainnav ul.menu > li > a {
      color: #000;
    }

Regards,
Kharis

Hi Kharis,

Thanks so much! That worked, and yes I do have Reveal Ids plugin, so I’ll know for next time.
One more thing, what could I add to this css code to change the color when the mouse hovers over “Cart,” “Contact,” etc in the menu on every page?
Thank you many times over!
Cailley

Hello there,

For mouse over color change, try this code:

    .page-id-2603 #mainnav ul.menu > li > a:hover {
      color: #fff000;
    }

Regards,
Kharis

Hi Kharis!

Thanks so much - this worked well for the menus on Cart and Contact pages. For some reason, I am still unable to get the menu on the Shop page to have a different color when the mouse hovers over it. I have double checked the page Shop page’s ID # - it is 2602. So I’ve used your above code, with my Shop page ID # and the green color I want:

.page-id-**2602** #mainnav ul.menu > li > a:hover {
  color: #3bbc00;
}

But am still unable to see the hovering color. I am wondering if some of my previous css code is blocking it…
Many thanks and sorry to keep coming back to you on this issues!
Cheers,
Cailley

Hello Cailley,

Try this code:

    .woocommerce-page #mainnav ul.menu > li > a:hover { 
      color: #3bbc00;
    }

Regards,
Kharis

That did the trick, thank you again Kharis!

Cheers,
Cailley

You’re welcome Cailley!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis