Different pages – different menu

  • 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)

    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)

    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 4 years, 9 months ago by mnatseah624.
    Theme Author Tom

    (@edge22)

    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)

    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)

    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.