Header Opacity on Homepage

Hello: on the following homepage:

https://mclef2023.squarespace.com/
Password is:   password

I have opacity set on the header so that the video shows through the navigation. Unfortunately all other pages look pretty bland as a result. Does anyone know any code to have the homepage only have opacity in the header and all inside pages have a solid color with no opacity? Thanks in advance.

If you add the page collection ID in front of the code you've already used, then that will target it to just the one page, like this:

#collection-64073cc33a5f64371d5e7626 {
  body.homepage .header#header {
    background-color: transparent !important;
  }
}

Thanks Ziggy - I added exactly what you have above but the homepage header is still solid white. If this can be be done, it is possible to have not just transparent but at 50% opacity of white? Thanks in advance.

You could try adding your original code into the homepage header code injection rather than in Custom CSS.

Hello Ziggy - I deleted the code from CSS and put it in the page Advanced code but the header is still solid white:

#collection-64073cc33a5f64371d5e7626 {
  body.homepage .header#header {
    background-color: transparent !important;
  }
}

No, not in advanced, in the page header code injection (home page settings), and given it's in the header, then you need to add <style> tags and you don't need to collection ID.

<style>
  body.homepage .header#header {
    background-color: transparent !important;
  }
</style>

Hello Ziggy - I pasted your exact code in both Advanced/Header and the homepage Advanced code section and neither works.  Thank you in advance for your help.

1. For the Header, set the Style to "Dynamic" (see attachment)

2. For the inside pages, inject the following into each page's header. Use whatever color you want the header to be on those pages.

<style type="text/css">
  .header-announcement-bar-wrapper { background-color: yellow; }
</style>

In action (I used a photo instead of a video). Navigate between Home and Page One.

https://sheep-butterfly-4l87.squarespace.com

pw: Header

Thank you very much - that's great!