Sticky header in landingpage should invert color for the subpages

I Need Help
1

Hello,
I have to use a sticky header on my landing page with black text on a white background.
On all subpages, the header should be inverted, meaning white text on a black background.
My Blocs programmer and I haven’t been able to figure out how to do this, not in this forum nor with the help of AI. It doesn’t seem to work via the Class Manager.

Could you give me a hint as to what we’re doing wrong?
Thank you very much for your kind help.

Guenter

2

I’ve never tried this, but in my head it sound feasible.
In your header bloc, make 2 menus, one black, one white version and hide the relevant ones on certain pages?

3

Thank you very much, Trevor, for your input.
I’ll discuss this with my programmer to see if she can implement it that way. I’ll be happy to give you feedback later!
Have a great day!

4

Hi @Guenter

A few ways to do this, assuming the header is in the top Global area, is you can disable the top global on your landing page, and add the header to the dynamic area, while thats one way, it does mean any changes to header, you need to also edit this one also.

Or (the way I would do it) add a class to the body, using the page settings and use that to specify style changes to the header. This is then all done in the class manager and you can keep your header in the global area.

eg.

.my-header { background-color: black;}

.landing-page .my-header {background-color: white;}

Note: I don’t think the design canvas adopts the page body class, it will show in preview though (unless that oversight has been fixed :man_shrugging: )

5

Hi Pete and hi Trevor,
Thank you so much for your suggestions. We tried that, but it didn’t work with the classes. !
So I’ve changed the design and decided not to invert the text and background. Sometimes that’s the simplest solution… unfortunately.
Thanks so much for your help anyway!!
Have a wonderful day!
Gunter

1 Like
6

Shame - but good!

Please let us see the finished result when live. Always good to see other people’s projects.

7

It does work :100:. It won’t show on the design canvas, but it will on preview. You can send me an email through my website if you need some help with it.