[Resolved] Sticky Navigation Logo Color Issue

[Fred]

Hi Tom,

I’m trying to achieve this site navigation effect: https://halanbrickleylaw.com/ (not my site; and I only have a local website I’m trying to design).

White Logo and Menu text on image or colored background, but then when scrolling down the page, switch to black Logo and Menu text on white background.

This is what I’ve done so far (after searching forum and docs):

I followed this: https://docs.generatepress.com/article/navigation-logo/ for using navigation as header. I can then get 90% there. The issue is the logo. I have two nearly identical logos, one black, and one white. But in order to have a white logo on the header image, I need to set either the global navigation logo to the white logo — which then means no black logo when scrolling. Or if I set it to black, and then set the page header plugin navigation logo to white, that works for the image, but seems to be a page wide setting so it remains white when scrolling.

Is the effect I’m looking for possible, or easily achievable without extensive coding? Or am I missing something really stupid?

Thanks,

Fred

[Leo]

Hi there,

I believe this is what you are looking for: https://generatepress.com/forums/topic/change-logo-media-source-file-when-sticky/#post-304545

We do have plans to make this easier in the future.

Let me know if this helps.

[Fred]

Thanks Leo. That’s a little overwhelming for me. I’ll go with a different design choice for now.

Best,

Fred

[Leo]

No problem!

Let us know if you want to give it a shot 🙂

[Author]

Posts