Different Menu Colors Due to Different Backgrounds?


#1

On my front page, I have an image where the menu font looks nice in white. But, on my other pages, the background is white, so the text is invisible. Is there any way to have a different menu text color on those “other” pages?


#2

Hello Christopher,

You can change menu text color on all pages by adding this CSS code (change yellow to whatever color you want):

#mainnav ul li a {
color: yellow;
}

Or, alternatively, you can edit background color of your images :slight_smile:

Hope it helps.

Sincerely, Roman.


#3

So, is the answer “no?” Because that’s what it sounds like. :smiley:

My original question: Is there any way to have a different menu text color on those “other” pages?

I want the text color of the menu items to be a different color on the front page and other pages. Possible? Yes or no?

I mean, it IS possible… it’s just a matter of if it’s going to be easy with your interface, or if I’m going to have to change the template.


#4

Hi,

Yes, you can make every menu item a different color, but first you need to check the ID of every menu item, so that will be needed to be added in the above Custom CSS:

#menu-item-(menu-item-ID-goes-here) a {
    color: red !important;
}

Or if you post a link to your site I will give you the Custom CSS including with all your menu item IDs ( in order ).

Best Regards,
Csaba


#5

Csaba, the problem is, on my front page, the main menu is defined with the exact same tags as the menu on the blog page. So, even if I find the #menu-item-46 (as an example), that’s the same ID on the other page, so I’ll still have a problem. I can’t set it to white for one page and black for the other without some differentiation somewhere in the parent tags. It looks like I’ll have to modify one of the pages to add an additional class definition. What do you think?

You can see my site here: https://giveadime.co/

See the top nav menu? Nice and white. Click on “Blog,” and you will see the menu still white against a white background.


#6

Yes, you can use parent classes to achieve your goal. Looks like you already did that :slight_smile:

Best Regards, Roman.


#7

Hi, Roman. Yes, I figured it out. :slight_smile:

Thank you!


#8

You are welcome Christopher, have a nice day! :slight_smile:


#9

I have the same problem, could somebody explain how to use parent classes to get a different font colour for the menu on the front page?


#10

Hello @guidok,

First, you have to find the ID. You can do it by viewing the source code of a page in browser an find this line:

<body class="home page page-id-1 page-template…

page-id-1 is a parent class with page ID.

Then, use the CSS code below to change color of menu items text on certain page (just replace .page-id-1 with your own class):

.page-id-1 #mainnav ul li a {
color: yellow !important;
}

You can add this code to style.css file of your child theme, also you can use Simple Custom CSS or similar plugin for adding CSS code.

Kind Regards, Roman.

P. S.
It’s always better to create your own topic for your question.