Jump to content

Transparent-to-filled on-scroll navigation

Recommended Posts

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. 

Screen Shot 2021-05-11 at 3.03.21 PM.png

Screen Shot 2021-05-11 at 3.03.53 PM.png

Asset 11@2x-8.png

Christopher Santoro
Founder, Creative Director
chris@santorodesign.co

**********

SANTORO DESIGN, LLC empowers early-stage B2B and DTC companies to sell at a premium with compelling brand strategy, visual identity design, and website design solutions.
Studio Website
The MVB: A Better, Faster Way To Brand Your Company
Instagram
LinkedIn

Link to comment
  • Replies 2
  • Views 727
  • Created
  • Last Reply
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

and do you need help fix these?

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

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

rhino-harmonica-emrl.squarespace.com-01-

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

rhino-harmonica-emrl.squarespace.com-02-

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

rhino-harmonica-emrl.squarespace.com-03-

4. (Mobile-Homepage) reduce this spacing?

rhino-harmonica-emrl.squarespace.com-04-

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.