Bootstrap menu light or dark based on the content lightness below

I have a fixed-top bootstrap menu with a transparent background. How is it possible to change the color of the menu based on the brightness of the content below the menu? Is this possible with the help of Pinegrow? I’m interested in any other solution, if someone can help, thanks!

Hi! So nothing is built into PG that will help you with that. However, we can add any kind of JS (code or library) to our PG projects, so literally anything is possible in PG.

What you want to do is actually very complicated and you’ll have to be very good a JS to pull this off. This concept will get you started, but it’s going to be tricky because the colors behind your menu would be changing as you scroll down. That’s actually the hardest part. Determine If A Color Is Bright Or Dark Using JavaScript - Andreas Wik

A simpler solution would be to change the transparent menu to white as soon as you start to scroll down like I did on this site: https://cabinetsdirectusa.com/

1 Like