[Resolved] Possible to have another color of the primary navigation on frontpage?

[Carsten]

Hi there, is it possible with some CSS to have another color of the primary navigation on the frontpage to match the content, than the navigation color on the rest of the pages?

And is it possible to have different primary menu/header colors on mobile and desktop?

Thanks!

[Ying]

Hi Carsten,

is it possible with some CSS to have another color of the primary navigation on the frontpage

You can try using a Header element, set the primary navigation color in the site header tab and set front page as location.
https://docs.generatepress.com/article/header-element-overview/#site-header

is it possible to have different primary menu/header colors on mobile and desktop

Yes, but custom CSS will be needed.

[Carsten]

Hi Ying, using a Heading element as suggested, is working great.

I would look for a custom css solution for my device issue, though it would be great to have these different device options in the site header of the element, and I think more and more site owners would like to distinguish their mobile content from the desktop like eg. other color of the header or navigation.

Thanks for the help!

[Ying]

If you can link us to your site, we should be able to help with the CSS 🙂

[Carsten]

Hi Ying, thanks for offering your help. I could probably work something out using media queries, but I will appreciate your help to get the right way of doing this.

Link is added.

Thanks!

[Ying]

You are using mobile header for mobile, so there’s no media query needed, you can use this CSS:

nav#mobile-header {
    background-color: green;
}

Let me know if it works 🙂

[Carsten]

Hi Ying, the CSS i working fine;-)

Thanks!

[Ying]

You are welcome 🙂

[Author]

Posts