Jump to content

Make the header transparent on the first page only

Recommended Posts

  • Replies 2
  • Views 381
  • Created
  • Last Reply

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.