Transparent header below first section

Hi, my site is https://calliope-kumquat-wz3x.squarespace.com/,  the PW is squarespace.

I have used custom css to move the header below the first section, but I would like for it to be at the bottom of the first section actually, so it is transparent with the background video. It is set to transparent, however, opening the landing screen, it shows with a white background (probably because it sits below the first section, not at the bottom of first section). I would like for it to be transparent as an overlay on the first section.

This is the code I've used on the page header:

<style>
@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
  z-index: 10000;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(100vh - 93px)!important;
}
}
</style>

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

Can you edit Site Header > Enable Fixed Header?

If you do this, when scrolling down, the header will have a new class. So we can target code more easily in case of scroll - not scroll.

Yes, it is set to fixed header.

1 hour ago, tuanphan said:

Can you edit Site Header > Enable Fixed Header?

If you do this, when scrolling down, the header will have a new class. So we can target code more easily in case of scroll - not scroll.

Add to Design > Custom CSS

header#header:not(.shrink) {
    background-color: transparent !important;
    bottom: 0 !important;
    top: unset !important;
}
body.homepage #page>article>section:first-child {
    min-height: 100vh !important;
}