Wondering how I can change my logos colour when it reaches certain sections in my site. Im using some dark and light backgrounds and need my logo to change between White and Black when it reaches these sections.
If you consider Webflow features, there’s nothing out of the box to actually change the color of the logo when you reach a given section. However, with interactions, there are many ways to achieve the result. I did it once, here is how I setuped it.
- create a container for your logo. Give it the class “logo-container” and give it position:relative (it makes no difference, that’s normal)
- Put the black version in it. Give to the black version (image) ONLY ONE class name, like “black-logo”. Give it position:relative and z-index of 10.
- Now put the white version in the container too. It should appear after the black version. Set it to position:absolute, click on the button that positions it top left, and give it z-index of 11. Your white logo should now cover the black logo. (if you want the opposite by default, you know what to do, right? )
Ok, now we’re going to create two interactions. The principle here is that when one section reaches the top, we show or hide the white logo. So create one interaction that tagrets the white logo and hides it (display:none) and one that does the opposite. Set the interaction for each section and adjust the threshold to set when the interaction kicks in.
I realize, writing this, that it may be difficult to adjust. let me try a better, simpler system… I’ll come back.
Thanks for the reply Vincent. Just started with webflow and I got a bit stuck on the interactions and triggers. Will wait for your reply
Hello, wondering if you were able to get a look at this @vincent
Hi sorry I’ve been traveling
Well no, for the moment no luck, I stumble upn an issue with fixed position and zindex, that I can’t seem to fix.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.