Ok, so, changing background color should be pretty easy, although I haven’t been able to make it work, I’m sure I will eventually. The problem is that I need to change color from black to yellow, which means that the logo, the text and the button on the navbar also needs to change. For the life of me I can’t find a tutorial that explains how to do that accurately. The ones out there simply don’t work and none of them points to how to change the logo, since it would need to be replaced by another image.
For reference this is the above the fold state:
And this should be the below the fold state:
The closest I got to making it work was by using the “filter” animation, inverting the colors of the elements, but it looks horrible.
One way to achieve this would be to create a div that is absolute to the body top. Now you set an scroll in/out of view animation to this div that adjust the navbar!
Now to change the navbar logo color, instead of uploading as an image, upload as an embed and change the fill to “currentColor”. This makes it so that the SVG gets the parent font color (Which we can adjust with the animation)
I completely understand the challenge you’re facing with changing the colour of the navbar background, text, and logo. I’m glad you reached out, and I’m excited to help you out! I went ahead and created a video tutorial specifically addressing your issue
I’ve designed the tutorial to be clear and easy to follow, so I’m confident it will make the process much smoother for you. If you have any further questions or if there’s anything else you’d like to explore, please don’t hesitate to reach out. I’m here to support you every step of the way!
