When developing a website for a client, we wanted the logo and menu to change colors based on the section. On white sections, we wanted to use the color logo, and on dark sections, we wanted to use the variation of the white logo.
As an alternative to manual interaction, we decided to develop this functionality with Javascript and CSS. The Javascipt code measures the section size and does the rest for us! 😎
A few points to note:
- The color variation of the logo has a class named "Logo Dark"
- The white variation of the logo has a class named "White Logo"
- When you want to show the white logo across a section you should add the class "Theme White", otherwise use the class "Theme Dark"
- You can set the height of the sections that works for you (Ex.: 100vh, 600px, etc)
- All the custom CSS and JS are in the "Projects Settings"
Feel free to clone it and have fun! 🚀