Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

secondary menu background color per menu

  • I have a number of menus which are allocated to the secondary menu position through the conditional menus plugin. So, each menu only appears on specific pages. Works perfectly. However, I would like each of those conditional menus to have a different background color.
    I thought I might be able to add a new css class for each menu with a css sub class secondary-navigation and then simply specify the background-color. I cannot see where I could add that css so that it only impacts on the specific conditional menu (not menu item).
    Conditional-menus forum support specifically says that you cannot change the css per menu as it is a theme function not a plugin function.
    Then I looked at the wordpress navigation block and it is just a pain – classic menues are better
    Just looking for ideas…

    For clarification, what I want to acheive is:
    MenuA on pages 1,2,3,4 background color blue
    MenuB on pages 5,6,7,8 background color orange
    both menus location in the secondary navigation position. Conditional menus allows me to define the pages the menus appear on and works fine. Just can’t change the colors!

    Help appreciated. Thanks

  • Hi there,

    Can you link us to the pages?

    For the CSS, you can add the page ID to the CSS to target the specific page.

  • Thanks for getting back to me so quickly.

    So, I change the color of the secondary menu by adding CSS for that page?
    In other words for example:
    .secondary-navigation {
    background-color: red;

    But where do I put the page id to only make it happen on those pages.. and how do I include multiple pages?

    Got nothing to show at the moment, ‘cos nothing has worked!

  • But where do I put the page id to only make it happen on those pages.. and how do I include multiple pages?

    Something like this:

    :is(.page-id-100, .page-id-200, .page-id-300) .secondary-navigation {
        background-color: red;
  • Brilliant. My problem is solved. Thank you for your speed, efficiency and understanding of my issue. On a final note, do you have any idea when generate blocks rc1 will become a final release?
    Many thanks.

  • You are welcome!

    For GB plugin, I’m not sure, as it depends on whether more bugs are being discovered, but usually, it won’t take long 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.