Make the header transparent on the first page only

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

I want the header to be transparent on the main page only. I found some code on here that users made for other people with the same request, but their code doesn't work for me. If someone could help i would really appreciate it! Thank you :)

Add the following to Design > Custom CSS.

.homepage[data-menu-overlay-theme-switcher="true"] .header.white-bold {

  background-color: transparent;
  
  }

Let us know how it goes.

thank you that worked perfectly! sorry for the late responding, I didn't get a notification so I didn't think anyone had answered my question. I have another question for you that's a bit harder if you have a moment. 

Im trying to get the parallax scrolling effect. I watched a video that showed how to inspect and to get the section id for the area i want the picture, and the url for the picture itself. I've done this so many times but it just isn't working and i don't know whats wrong. Here is all the information I am hoping you will need:

here is the overall code as I believe it should be:

CSS Code
[data-section-id="5fd3c136f185343d3286a5ac"]{
  .section-background{
    &::after {
    //creating the element      
      content: "";
      width:100%;
      height:100%;
      position: absolute;
      
      //adding the image
      background-image:url(https://images.squarespace-cdn.com/content/5fd27dadddcfa0625ddecf41/1608753288340-OKNX0NRCDNZ0CFX0LCKE/wheat+shadow.jpg?format=500w&content-type=image%2Fjpeg);
      background-repeat:no-repeat;
      
      //positioning the image
      background-size:cover;
      background-position:center center;
      background-attachment: fixed;
      transform: scale(1.2);  
      
      //mobile
      @media(max-width:787px){
        background-position:center center;
        background-attachment: scroll !important;
      }
    } 
  }
}

Things to note:

The video had said to remove the picture from the section you wanted it to appear, and instead to make a new page called pictures that isn't enabled so the public can't see it. thats where i got the url for the picture. can you see anything at all wrong with this code? The areas that i've modified are colored blue to try to make things easier. here is the link to the video (https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71#:~:text=So the parallax effect will,section background on your website.). If you have a better way of making the parallax scrolling effect please let me know because this isn't working anyways. I hope that the parallax will be compatible with the code you sent me.

THANK YOU SO MUCH!