Search the Community

Hi @tuanphan, Any code to add a scroll indicator over a Brine index gallery slideshow banner? https://renfield-centre.squarespace.com/ PW: renfield Thanks Pete

Site URL: http://www.saltycopy.com Hello, I am struggling to figure out how to edit my header. I want a transparent, fixed header (with white text) when at the top of a page on my site. I would like to change the color of the fixed header to an aqua (#c7faeb) with black text when I scroll. I've been playing with various CSS codes for this but haven't figured it out yet. I am using Squarespace 7.1 and any help would be very much appreciated!

Hi guys, is there a way to make a "scroll down" arrow like this template? https://burke-demo.squarespace.com/

Site URL: https://www.shiftmovement.org.uk/home%C2%A0 Hi, I am trying to get my image card to allow scrolling on overflow. 1.I am struggling to get the text box to stay the same size as the image. Whenever the screensize changes whatever px I set it too doesn't work. I want it to be responsive like an image card is normally. The code I have used has got the text to scroll but has cut it off weirdly at the top. Something isn't quite right! Can anyone help with what i'm missing? I also want the image card to be full width for it to visually look like this

Hey all, I'm trying to achieve this effect and thought to ask here if you know the way https://ghostpluginssuper.squarespace.com/huey-page-sections/?password=ghost Thank you

Is there a setting which allows the visitor the option to either continuously scroll down through the page or hit a button?

Hello, I am having an issue that I cannot seem to fix and would appreciate any help. My squarespace site has a globally black background. When viewing it on mobile (iphone) and scrolling up past the contents of the website to trigger a website refresh, or even when simply scrolling down past the bottom contents of the webpage, the deadspace that appears is white instead of black. I am attempting to change the color of this overflow to black to match the background color, or if possible, would even like to simply disable the overflow that occurs when scrolling too far. Thank you for your time

Hello! 👋 I am having an issue with parallax scrolling for background images. It seems that the issue arose about the same time that SS had headers and footers disappearing/changing colors. According to the SS status page, the header/footer issue had been fixed but apparently that fix caused the following code to stop working altogether. The problem is that, when I put the following code into the Settings > Advanced > Code Injection > Footer section, all of my background images completely disappear. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}main .has-background.background-width--inset{margin:4vw;padding:0!important}main .has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style> I have been using the code above flawlessly on multiple sites for some time without a hiccup until recently. I tried using SS built-in parallax engine for my background images but it isn't nearly as smooth as what the above code did for background images. My websites just aren't the same without it. I have also tried other similar bits of code that is supposed to do the same thing (actually, used to do the same thing before the SS header/footer issue) as the above code but those will not work either. I was wondering if anyone has had similar issues as I am having or maybe someone could look at the code above to see what might be causing the background images to completely disappear? Thanks in advance for your time! Website: https://cello-dachshund-wage.squarespace.com/config/ Password: WCB2022

Hi all, My website has a product where we require the customer to fill out a custom form in order to complete the purchase. For some reason, the form I created will not scroll down when opened. https://www.sdfsa.org/store/resource-organizing-workshop Click on 'register' If you place your cursor in any of the visible fields within the form, you can move through the fields/questions by hitting 'tab' Is it due to the code I've added into the code injection and CSS areas? Or is there code that I can add to my website to ensure that this form scrolls down? Or code that can open the form in a new page rather than a lightbox? Please help, I really need this to work. Thank you.

Hello. Is there a way to make an automatic smooth scroll from section 1 of the page to section 2 after a few seconds? Probably with javascript.

Hi, I have created a store page and want to add this scrolling behind the products like how I have made in this mock store page but there are two issues: 1. The Store space does not allow me to add a scrolling block on the actual products part of the page so I am trying to find a solution for that 2. the store page does not allow me to customer the rows to be misaligned like in the image which is the style I am going for Any help would be greatly appreciated. Thank you so much!

Anyone know how to create a scrolling effect like the one in this video? The built-in parallax feature doesn't quite cut it. Thanks! Screen Recording 2023-01-10 at 11.58.20 AM.mov

Hi all, my website has a product where we require the customer to fill out a custom form in order to complete the purchase. Unfortunately, the form will not scroll down when opened. https://www.sdfsa.org/store/resource-organizing-workshop Click on 'register' If you place your cursor in any of the visible fields within the form, you can move through the questions by hitting 'tab' Is it due to the code I've added into the code injection and CSS areas? Please help! Thanks!

Site URL: https://coconut-grasshopper-b736.squarespace.com/config/pages/632491ecd2457c0d3e60fa0e?p site password : gingerkev Hi all I've successfully added scrolling 'back to top ' arrow on mobile pages 'case studies' and 'testimonials'. However it also shows up on menu page when you click on burger icon . ...dont need it there! as no scrolling possible so its a bit 'in the way' Is there CSS that can remove it from that 'menu page' only? Thanks in advance Kevin

Hello! I have a fixed quote/logo/watermark on my website, that keep disappearing behind pictures etc. when scrolling. I think the logo/watermark is inserted via one of these custom CSS-code (I didn't do it, so I dont know much): @media screen and (min-width:550px){ .page-section {border:7px solid transparent} div.stickylink{ position:fixed; width: 320px; bottom: 0px; right: 0px; height: 320px; border-radius: 50%; opacity: 0.9; z-index:900; } } or this .page-section {border:7px solid transparent} div.stickylink{ position:fixed; width: 320px; bottom: 0px; right: 0px; height: 320px; border-radius: 50%; opacity: 0.9; z-index:900; } } It's also inserted in a code block in my footer like this: <div class="stickylink"> <img src=" https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6059853c3ca5ae3b260b169e/1616479548490/YO_QUOTE_OUT_WHITE+(1).png"> </div> Is there any way to make it go appear in front at all times? Something to add to the code maybe? Thanks in advance 🙂

I'm trying to add a transparent color to the fixed top navigation upon scroll using the following code to no avail: .Header { position: fixed !important; top: 0; left: 0; right: 0; bottom: 10; z-index: 999; } /* Mobile */ .Mobile-bar { background-color:transparent; } /* Desktop */ .Header { background-color:transparent !important; } .Header{ transition: 0.2s; color: #f6f6f6; } What am I doing wrong? Thank you!

Hello friends! I just launched our 7.1 site after moving from 7.0 A few issues I noticed right away were some formatting issues on mobile. You can see the text box where it says "Washington's Top Choice For" is above the scrolling block on the desktop site, but it's reversed in mobile. Additionally, there are some spacing issues. Same thing for the text blocks "visit our" and "Inspiration Gallery" Any obvious solutions I'm missing with this? Thanks in advance! http://markthepondguy.com

The Anchor Links I have created for the "individual" button and "organizations" button work, HOWEVER, they do not scroll immediately. There is a very SLOW scroll to start, then it scrolls quickly. The same thing happens when you click the up arrow on the right hand side of the screen: it starts to scroll very slowly, then speeds up. Can anyone help with making the buttons and arrow scroll quickly right away? @tuanphan? Thanks! password: masterclass

Hi there, I'm trying to add a side navigation scroller on a 7.1 website like on this 7.0 website below: https://sunfish-bamboo-x4az.squarespace.com/ Password: motdepasse Is there any code that I could add to have this feature? Thanks!

Hello, I noticed that the scrolling speed of the scrolling block module is coupled to my screen's refresh rate, 240hz scrolls way faster than 60. Also, unchecking the "Animate controls and elements inside windows" box in the performance options in windows completely stops the animation. Has anyone found a way around these issues ?

Site URL: http://www.devinehealings.com Hello, So I have a Lightbox form on my home page (4th section) that is completely fine on desktop, however the scrolling is totally messed up on mobile. It seems to look fine upon the initial opening of the form, but once a field is selected, my phone zooms in automatically (which I have found out is due to the font-size and I wouldn't mind that happening if it wouldn't break the form). The display of the form in a zoomed in state seems to be fixed, as the lowest text field won't show even if selected. And when trying to scroll down it only scrolls the main page beneath the actual Lightbox form. I have tried changing the display, position and overflow-y properties but nothing has worked. I also checked and none of the custom CSS used says anything about how the position or display has to react, yet it seems to be fixed. I also removed all my Custom CSS to see if any of the code is causing the issue but it remains regardless. Please does somebody know how to fix this? I would highly appreciate your help! Password to the site is devinehealing Thank you

Site URL: http://www.moonlitdesign.uk Hey! I am having issues with my navigation menu on mobile when the dropdown is open. It is currently giving me the ability to page scroll which is causing my sticky nav bar designed for scroll to appear and take over the static nav which has the 'X' close icon. Could I please have some help to try and disable the scroll so the sticky nav does not appear. www.moonlitdesign.uk FOR MOBILE

Hi guys! My website is below: producedbybeckert.com (password is "BRANDED") You'll notice that if you click on "Conversations," and you're on a standard macbook laptop- you can't even scroll down to see all of the links that appear under the "Conversations" dropdown link. my question is: how do I fix this? how do I add the ability to keep scrolling? Right now my website is fixed on my page, so i can't scroll down to the bottom of the dropdown menu.

Site URL: https://kircher-redesign.squarespace.com/process I have an issue regarding Squarespace carousel lists. The carousel I've created is text-heavy, so I want to stop it from auto-scrolling. This way people can read each item and then advance the items at their own pace. Site password is: kircher

When I scroll to the bottom of my site, I get this white background that shows and I feel it looks sloppy. I know I've seen other SP pages that don't do this so I'd love to remedy it. Second issue, the slider <> selector at the bottom. Is there any way to adjust the color/transparency? Even without CSS? I don't know what it's called so I can't easily navigate to it to make the changes. Thanks guys