navigation Transparent-to-filled on-scroll navigation

Site URL: https://rhino-harmonica-emrl.squarespace.com/

Hey everyone!

I'm working on a client site and, just on the homepage, I'd like for the navigation to go from transparent to white background on scroll (with the logo going from knockout to full color as well).

I haven't been able to find any articles on this in my search, so I'm hoping I might find some help on here. 

On 5/12/2021 at 2:04 AM, santorodesign said:

Site URL: https://rhino-harmonica-emrl.squarespace.com/

Hey everyone!

I'm working on a client site and, just on the homepage, I'd like for the navigation to go from transparent to white background on scroll (with the logo going from knockout to full color as well).

I haven't been able to find any articles on this in my search, so I'm hoping I might find some help on here. 

 

Add to Design > Custom CSS

/* transparent homepage header */
body.homepage header#header:not(.shrink) .header-announcement-bar-wrapper {
    background: transparent;
    position: absolute !important;
}
body.homepage header#header:not(.shrink) img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
body.homepage header#header:not(.shrink) .header-nav-list a {
    color: white;
}

and do you need help fix these?

Site URL – https://rhino-harmonica-emrl.squarespace.com/

1. (Desktop-Homepage) Scroll bar on bottom of screen

2. (Mobile-Homepage) Remove image on top?

3. (Mobile-Homepage) change order of 02-image?

4. (Mobile-Homepage) reduce this spacing?