joshuahext

Oh, I had missed a { in my code so it had all broken, stopping the change logo on scroll. So, now that's fixed... I get: ...before scrolling.

Hey, I've just noticed that the logo also remains white when the menu is open. I have also tried some code to fix that but can't figure it out. Do you have any thoughts on that too?

Perfect, thanks!

Hey all, So, a client requires that the hamburger on their homepage is: 1. White before the header shrinks on scroll + before the menu is opened 2. Grey after the header shrinks on scroll + before the menu is opened 3. Grey before and after the header shrinks on scroll + after the menu is opened. I used the code below to achieve this: #collection-66729b4c507c183e7979f764 { #header:not(.header--menu-open) .burger-inner > div { background-color: white; transition: all 0.5s ease-in-out; } #header .header--menu-open .burger-inner > div { background-color: #3e4245 !important; transition: all 0.5s ease-in-out; } #header.shrink .burger-inner > div { background-color: #3e4245; transition: all 0.5s ease-in-out; } } However, for some reason it's not working and I cannot figure out why. Any help would be greatly appreciated! Site is here: https://www.jandjeducation.com/

Oh my god I'm an idiot. Thank you so much. I didn't think that it could be that the image below was being made darker. That's perfect. Thanks!!!

Site URL: https://parrot-bird-pz4d.squarespace.com/ PW: Fiona Hi all, I went to bed last night and everything was fine, but upon waking the gradient header now lightens everything underneath it. I do not want this at all and have no idea how to fix it. I thought perhaps the client making some changes while I slept caused it but removing all of my code does not fix the issue and I have searched through all of Squarespace's Header customization options that I can find and there doesn't seem to be anything causing it there either. Please help! You can see the effect I am referring to here: I've also noticed that it's made the black gradient that I've coded for the shrink header a weird lighter grey instead of the pure black I have coded. EDIT: I've spoken to the client and they made no changes to the Header overnight. So far I have tried: .header .header-announcement-bar-wrapper { -webkit-backdrop-filter: unset !important; backdrop-filter: unset !important; background: none !important; mix-blend-mode: normal !important; } to try to remove this effect to no avail.

@tuanphan, I'm having the same issue. I can get this code snippet to work for every other kind of block but not shape blocks. It would be wonderful if we could get your brain on this!

Same issue, a client really wants to be able to use arrows to navigate a slideshow.

Hahaha, they just said "ask people on the forums, we won't do anything for you. And we can't be held responsible for the efficacy of their solutions" so I don't think they're going to do anything. Definitely raised the issue though.

That was the solution! I'll just go into a bit more detail to help anyone with the same issue: So, at my 100% zoom level I can't shrink the text block. Then, even with centre alignment, zooming out, shrinking the text box and then saving works a treat. Now everything works perfectly on all monitor sizes. The only thing to flag is, if and when anyone else has this issue, whenever you change anything at all, the block will revert to having the massive spacing. So every time, before saving, zoom out to 200%, shrink the block last and then save. Learn to know where the other blocks will sit when you shrink the block because it has to be the very last thing you change. Thanks again!

Hey there! Okay, so I tried the zooming out crazy amounts and shrinking the block and it seems to have worked on my monitor. That's crazy. I just kept going "SURELY NOT" out loud the whole time. I need to wait until my client wakes up to check with them as to whether it's fixed on their monitor but that's crazy. I would never have thought of something as simple as zooming out wildly to fix it. I don't get why FE wouldn't just make it flush with the block below at all sizes as standard though given that if you put two blocks together you obviously want them to stay together at all monitor sizes and as it always has on the 20 or so prior sites I've built but I guess things are always shifting and changing at the moment. That's kind of bonkers. I'll reach back out here to say whether it worked for the client or not but if that's the solution I will obviously mark your last message as such and I will be in your digital debt forever ahaha. Thanks for working with me on this so far.

I've tried reducing it with code but unfortunately it you reduce it on the monitor it shows up on it overlaps on the others. I will reach out to Squarespace just wanted to make sure I wasn't missing anything. Any further thoughts from anyone would be greatly appreciated though as speed is of the essence here.

Hi @melody495 I'm afraid that isn't the solution. I can't shrink the text block any further than it's current size whatever alignment I set it to. So there's something causing this massive spacing that's unrelated to my code (as the issue persists even if I remove it all) and the alignment.

This is exactly what I am wondering.

Hey, so Will Myers has a great tutorial for doing anchor links with offsets without the need for scroll-margins (which don't see to work on Squarespace since the latest update) https://www.will-myers.com/articles/anchor-link-offset-trick-in-squarespace Hope that helps!