Change solid header background to transparent on scroll

Site URL: https://alpaca-ellipse-7m5r.squarespace.com/

Hello. I have a white solid background for my header but I would like it to be fully transparent once you start scrolling? Any help appreciated.

Password: brian

On 10/5/2022 at 3:03 PM, Sophie_T said:

Site URL: https://alpaca-ellipse-7m5r.squarespace.com/

Hello. I have a white solid background for my header but I would like it to be fully transparent once you start scrolling? Any help appreciated.

Password: brian

You can try the following code

#header.shrink .header-border, #header.shrink .header-background-solid{
  background: transparent;
}

Support me by pressing 👍 if this useful for you

This worked perfectly! Thank you so so much! 

On 10/6/2022 at 3:55 PM, bangank36 said:

You can try the following code

#header.shrink .header-border, #header.shrink .header-background-solid{
  background: transparent;
}

Support me by pressing 👍 if this useful for you

Hi. I pasted this into the HEADER section of the CoDE INJECTION part if ADVANCED SETTINGS. I refreshed my site but it didn't;t work and I have that code visible - see pic.

15 hours ago, Ratch said:

Hi. I pasted this into the HEADER section of the CoDE INJECTION part if ADVANCED SETTINGS. I refreshed my site but it didn't;t work and I have that code visible - see pic.

Can you share your site?

On 10/16/2022 at 4:02 AM, bangank36 said:

Can you share your site?

I cannot share site access it's a business site with lots of private stuff on there. I can share screengrabs of specific things?

On 10/24/2022 at 10:21 PM, Ratch said:

I cannot share site access it's a business site with lots of private stuff on there. I can share screengrabs of specific things?

You can duplicate the site, remove all elements, except header, then share its url

Or you can setup new trial template with same header layout + Share url.

We can help easier

3 hours ago, tuanphan said:

You can duplicate the site, remove all elements, except header, then share its url

Or you can setup new trial template with same header layout + Share url.

We can help easier

This is what I have done - did I paste it incorrectly?

On 10/27/2022 at 11:25 PM, Ratch said:

This is what I have done - did I paste it incorrectly?

 

 

No.

Design > Custom CSS

On 10/31/2022 at 10:32 AM, tuanphan said:

No.

Design > Custom CSS

I pasted it here and still nothing. Sorry I know nothing about coding.

On 11/3/2022 at 5:17 AM, Ratch said:

I pasted it here and still nothing. Sorry I know nothing about coding.

What is site url? Maybe some class name are incorrect

On 11/6/2022 at 10:08 AM, tuanphan said:

What is site url? Maybe some class name are incorrect

www.homeground.london

On 11/8/2022 at 8:26 PM, Ratch said:

www.homeground.london

Use this new code

header#header.shrink {
    background-color: transparent !important;
}

On 11/12/2022 at 9:50 AM, tuanphan said:

Use this new code

header#header.shrink {
    background-color: transparent !important;
}

This works! Thank you.

Helloo, 

I used this code for my website and it works : )

#header.shrink .header-border, #header.shrink .header-background-solid{
  background: transparent;
}

Only I want the background to be 50% transparent and change the solid color underneath on scroll. 
Is there a way to do so? 

On 3/6/2024 at 12:57 PM, wietske said:

Helloo, 

I used this code for my website and it works : )

#header.shrink .header-border, #header.shrink .header-background-solid{
  background: transparent;
}

Only I want the background to be 50% transparent and change the solid color underneath on scroll. 
Is there a way to do so? 

Use this code to for 50% transparent

#header.shrink .header-border, #header.shrink .header-background-solid{
  background: rgba(255,255,255,0.5) !important;
}