[Support request] Two different navigation menu colours

[Abraham]

Hi

On my homepage I have a set the primary navigation to have a light color on a dark background. However, on my blog I have a light background and the navigation is still light. How do I change the colour of the navigation for the blog site (without tampering with the Customiser setup)?

Regards

[Leo]

Hi there,

Are you using the header element by any chance?

Let me know 🙂

[Abraham]

I have a couple of Elements active (Custom Post Header, Custom Blog Hero etc.), but no “Header” element, no. The ones mention don’t have the header php included so I can add a class and change the styling from there

[Leo]

Any chance you can link me to the page in question so I can provide the easiest solution?

Let me know 🙂

[Abraham]

Can’t, helping a friend out with a page that is “under construction”. However, do you have a sample/snippet on a Header element, the theme is using GP and under Site Library (Page Builder) Elementor, theme name: Bold.

[Leo]

If you are using a header element with merged option on that page, then you can use the custom navigation colors options within that header element:
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

If not then we will need to use some CSS. You can see all the navigation color selectors here:
https://docs.generatepress.com/article/changing-navigation-colors/

To target the blog page, add body.blog in front of the selector.

For example, .main-navigation becomes body.blog .main-navigation.

Let me know if this helps 🙂

[Author]

Posts