[Resolved] Change Background Color of Forums in Menu

[Mary Pearson]

Hi Tom,

In my navigation bar I have my main menu background colour set to #3399cc with #fff for text of the active link, however it doesn’t work for the Forums link – I assume because it’s a different kind of link.

Am assuming that I need to treat this one link .menu-item-809 in Custom CSS but I don’t know how to do it.

Can you help?

Many thanks!

[Tom]

Your colors should apply to all menu items – doesn’t matter what they are.

Can I see?

[Mary Pearson]

Yes of course. If you go to the website at https://christiangayschat.com/ and click on any of the links, for example “Registration”, you will see that the link changes from blue text on white background to white text on blue background.

You have to be logged in as a member to see the Forums page but I’ve put a screenshot at https://christiangayschat.com/test/

You will see that the page selected is “Forums” but the background colour of the link is white, like all the unselected pages.

If you want access to the site, let me know where I can send you confidential information.

[Tom]

That doesn’t look like a menu item, it’s the title of the page?

[Mary Pearson]

Hi Tom,

Yes indeed it was a screenshot of the Forums page – the page that is active. The purpose was to show you that when that page is active the background of the link remains white instead of turning blue. I have now uploaded screenshots of the links from Home page and Registration page that work properly. Under that is the Forums page that has the problem. Please take another look with the new screenshots.

test

• This reply was modified 8 years, 1 month ago by Mary Pearson.

[Tom]

You can do this (assuming you’re using bbpress):

.bbpress .main-navigation .main-nav ul .menu-item-809 > a {
    background-color: #whatever;
    color: #FFF;
}

• This reply was modified 8 years, 1 month ago by Tom.
• This reply was modified 8 years, 1 month ago by Tom.

[Mary Pearson]

Thanks Tom. The background is now blue but so is the text. I can’t get it to be white. I’ve tried it in Safari, Firefox and Chrome – same thing for all of them – blue text on blue background.

I have verified that I copied and pasted your code correctly. I just changed the colour.

/* Menu Forums – when active background colour is #3399cc */
.bbpress .menu-item-809 {
background-color: #3399cc;
color: #FFF;
}

[Mary Pearson]

I just noticed too that if I click on a sub-link within Forums, that the Forums link background remains white, as opposed to all the others. When I click on a sub-menu item in the others, the main menu item shows blue background.

[Tom]

I just adjusted the code above – can you give it a shot?

[Mary Pearson]

No change in any of the browsers after dumping cache. Still blue on blue

[Tom]

Adjusted it again – let me know 🙂

[Mary Pearson]

Thanks Tom. That fixed it for clicking on the main Forums menu, but if I click on a sub-menu of Forums it reverts back to white background.

Is it possible to also make the main Forums link have a blue background when a (Forums) sub-menu page is selected?

[Tom]

That CSS will only work when you’re on a bbPress page.

If the other sub nav pages aren’t in bbPress, you need to add their page IDs to the selectors:

.bbpress .main-navigation .main-nav ul .menu-item-809 > a,
.page-id-xx .main-navigation .main-nav ul .menu-item-809 > a,
.page-id-xx .main-navigation .main-nav ul .menu-item-809 > a {
    background-color: #whatever;
    color: #FFF;
}

xx being the ID of the pages.

[Mary Pearson]

Thank you so much Tom. What worked for all the links is the following:

/* Menu Forums – when active background colour is #3399cc */

.bbpress .main-navigation .main-nav ul .menu-item-809 > a,
.page-id-0 .main-navigation .main-nav ul .menu-item-809 > a {
background-color: #3399cc;
color: #FFF;
}

(page-id-0 changes them all)

Thank again AWESOME TOM!!!

[Tom]

Glad I could help 🙂

[Author]

Posts