[Resolved] Change Background Color of Forums in Menu

Home Forums Support Change Background Color of Forums in Menu

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #175472
    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!

    #175524
    Tom
    Lead Developer
    Lead Developer

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

    Can I see?

    #175546
    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.

    #175613
    Tom
    Lead Developer
    Lead Developer

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

    #175688
    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.

    https://christiangayschat.com/test/

    • This reply was modified 4 years, 5 months ago by Mary Pearson.
    #175827
    Tom
    Lead Developer
    Lead Developer

    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 4 years, 5 months ago by Tom.
    • This reply was modified 4 years, 5 months ago by Tom.
    #175895
    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;
    }

    #175896
    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.

    #175934
    Tom
    Lead Developer
    Lead Developer

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

    #175950
    Mary Pearson

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

    #175993
    Tom
    Lead Developer
    Lead Developer

    Adjusted it again – let me know 🙂

    #176066
    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?

    #176188
    Tom
    Lead Developer
    Lead Developer

    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.

    #176293
    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!!!

    #176379
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.