samasplen

hey again @rwp! You kindly directed me here from the other forum. Any further help really would be so appreciated! I must admit there's a bit of guess work going on here from my end but this is where I'm at with it... I've copied the code from above and added in links to the images I uploaded via the 'manage custom files' section in Custom CSS. I've also added in all the code from jQuery 3.x and then pasted everything into the code injection for the Header section (not sure if this is the best location for it?). Do you know where I'm going wrong..?  My site and password is above and the code is below:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
  var topIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8e35dfcadf46aef884a77/1592320861718/Eleven_circle_solo.png";
var sclIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8d2ecb1f80f408deb0b1e/1592316654032/Eleven_lockup_white02.png";

$('img[alt="Eleven"]').attr("class", "logo")

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 50)
      $(".logo").attr("src", sclIMG);
   else
      $(".logo").attr("src", topIMG);
});</script>

hi @GabrielaS @RyanDejaegher @tuanphananh luck?? I'm trying to do the same but with Squarespace 7.1? Any answer/fix would be hugely appreciated!

My in progress site: https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

3 hours ago, rwp said:

Please link to your pages so I can check what needs to be done.

thanks @rwp! in progress site is here: https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

I'd just like to transition the current logo featured in the header to another png that incorporates the company name upon scrolling

On 7/2/2020 at 7:37 PM, yeshidesigns said:

Hey there, are you able to share the full code needed? I added in the jQuery 3.5.1 script but was confused where to add images and format the above.

I would also like to know this!

19 minutes ago, tuanphan said:

try :nth-child(3) or :nth-child(4) or :nth-child(5)

...

Thanks @tuanphan and sorry for the constant questions, :nth-child(3) does seem to effect the correct section, but it doesn't force the width to stay 100% on mobile. I can only seem to manipulate the height spacing and margins..?

38 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top: 90px;
}
}

 

Thanks so much! That's done the job with a bit of tweaking to the margins!

Like I say, is there anyway to do the same to the video half way down the page? I thought changing the section to 'third-child' might work but no dice

On 7/1/2020 at 10:35 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
	min-height: 40vh !important;
}
}

 

Thanks @tuanphan - unfortunately that hasn't worked. The video is still cropping. I'm using squarespace 7 .1 if that makes any difference? 

I'd also like to apply the same to the background banner video that appears half way down the page, if we can get this to work. I.e to force 100% width

hello @tuanphan - apologies but I'm having the same issue as all the people above. I would really appreciate it if you could help me out. I just want to force the banner video on the homepage to appear at 100% width on mobile (no cropping). 

Link and password below:

https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

Thank you in advance!!