Different pages – different menu

mnatseah624
(@mnatseah624)

6 years, 1 month ago
Dear GP users
With the help of the wonderful CSS page box in Simple CSS, I’ve changed the color of one page on my site to white. (The rest of the site is charcoal grey.)
But I’m having trouble with the menu. I’ve managed to change its color, but I can’t change the text color, so it’s invisible on the whitish background.
This is the code I’m using
```
body.page-id-830 .main-navigation {
    background-color: #fffbf7;
    color: #000000;
}
```
Anyone got any ideas how I can change the text color?
I looked at this https://gist.github.com/generatepress/793804f553c25c70823c but I couldn’t get it to work within the CSS box.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Theme Author Tom
(@edge22)

6 years, 1 month ago
Hi there,

The color is applied to the links in the menu items. Try this:
```
body.page-id-830 .main-navigation .main-nav li a {
    color: #000000;
}
```
Let me know 🙂
Thread Starter mnatseah624
(@mnatseah624)

6 years, 1 month ago
Dear Tom (@edge22)
Many thanks indeed. That works fine. Just one more question, pls.
The active page tab is still black with black text. How can I change the colors of the tab and the text?
- This reply was modified 6 years, 1 month ago by mnatseah624.
Theme Author Tom
(@edge22)

6 years, 1 month ago
Try this:
```
body.page-id-830 .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #FFFFFF;
	background-color: #1e72bd;
}

body.page-id-830 .main-navigation .main-nav ul li[class*="current-menu-"]:hover > a, 
body.page-id-830 .main-navigation .main-nav ul li[class*="current-menu-"]:focus > a, 
body.page-id-830 .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
	color: #FFFFFF;
	background-color: #1e72bd;
}
```
Thread Starter mnatseah624
(@mnatseah624)

6 years, 1 month ago

Dear Tom @edge22
Thank you very much. I’ve just one little remaining problem. When I mouseover on, say, Blog, then hover over the dropdown list, Blog becomes black and illegible.
Might you have another line of code for that?
Hopefully…

Theme Author Tom
(@edge22)

6 years, 1 month ago

The code you linked to previously has all of the menu and sub-menu related CSS: https://gist.github.com/generatepress/793804f553c25c70823c

You just need to add body.page-id-830 in front of .main-navigation, like I did above 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Different pages – different menu’ is closed to new replies.