Jump to content

Change banner social icon colors on scroll

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.willisforsurrey.ca

Hi,

 

I cannot find a single source for this code. I swear i've used it before. Would anyone kindly please help me get this code?

These are what is currently filling with white. I want white icons and then green on a single mouse scroll

.header-actions--right .header-actions-action--social {margin: 0;}
body:not(.header--menu-open) .light-bold .header-actions .icon--fill svg {fill: #fff;}

and using Darkest 2 as color profile

 

 

Thanks in advance :)

Link to comment
  • 3 weeks later...
  • Solution
On 6/2/2021 at 2:32 PM, mdr_willis said:

I'm so sorry. I didn't realize I missed this @tuanphan. Use tuan as password

Add to Design > Custom CSS

/* Social icons on scroll */
.shrink .header-actions use {
    fill: black !important;
}

 

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
On 6/6/2021 at 2:02 PM, mdr_willis said:

Hey @tuanphan is there a way to also do this with the site button by changing button fill on scroll? I continue to try different codes in the source but they aren't working

Use this

/* header button on scroll */
header#header.shrink a.btn {
    background: red !important;
    color: green;
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.