Jump to content

Transparent header below first section

Recommended Posts

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>

Link to comment
  • Replies 3
  • Views 189
  • Created
  • Last Reply

Top Posters In This Topic

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.

 

Link to comment

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;
}

 

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.