Holy moly @bangank36! That is some elegant and creative code - I love that you used a filter to change the logo color. I was expecting to need jquery and I love that it doesn't. Truely excellent.
There is one quite significant problem however, in my original post I wrote "On the homepage only" What I meant was that I only want this behaviour on the homepage. Everywhere else I want the navigation to use the pink on white BG version - what the navigation changes to once scrolling has commenced.
Reason being is that all other pages on the website have a white BG so, as it is now, the nav can't be seen. You can see this on the Contact page for example, or the About page where the nav can't be seen until you scroll the page down and it changes to pink on white BG.
So to be clear, on the page named "home" I want the nav to begin as White with a transparent BG and then, once scrolling has begun, I want the nav to change to pink with a white BG (this part is happening perfectly now, thanks to you). On all other pages I want the nav to always appear pink with a white BG - there is no need for it to change color (this is the part that is not happening).
Is this still possible?
Thanks again for your time and knowledge!!