Search the Community

Hi, Can anyone suggest the solution, why my website get refreshed while scrolling on phone. I use iphone where i noticed this issue.

Help with https://careinthecurve.com/ I was making some tweaks to the page description on the https://careinthecurve.com/#about page (under the main index). For some reason after I adjusted just the page description text and formatting in the page settings, all of a sudden the black arrow appeared at the bottom of my home page image (which changes to "scroll down" on hover). When you click it, it jumps to the Meet Jenn section. The arrow wasn't there before I made the changes to the page description. There doesn't seem to be a setting in site styles to remove this or even format the font or text color. I tried toggling parallax on and off and it didn't make a difference. I want to remove the arrow and "scroll down" text and still be able to scroll. Any ideas?

So I've asked the "Customer Care" team a few times about this issue. Site scrolls fine on desktop but on mobile it is choppy and jumps up and down as you go by different content. I've tried experimenting with parallax content on and off and other things, but it still happens. And quite frankly, just turning off parallax wouldn't be a "solution" really. So the answer I always get is, "We're aware of this, but no ETA on a fix." That's just not acceptable. So I'm posting this to see if anyone has had any success with any hack to improve how jumpy things are on mobile. We predominantly use Sonora and Mojave templates. Perhaps it isn't as bad on some templates? Thanks.

I'm wondering how I would put the main nav below the large Argus logo. Then, on scroll, the nav is sticky to the top of the page, and the large logo becomes smaller in the left corner. I added two screenshots of the design. Similar to this: https://studiovedet.com/en/. And, this is only on the homepage. The subpages would look like the scrolled version of the homepage. https://toucan-tetra-fwm2.squarespace.com/ p: argus

Hi guys - I am hoping to find a way to show the main navigation bar only after scrolling - probably once you're into second section. Something like in the example website above (https://kambaafrica.com/) Does anyone know how you'd do this? Not sure if good UX but keen to try! Thanks a lot.

Hello I'm creating a site for an ad agency where the homepage does not have the logo in the primary nav; it's hidden. The logo is the large 'ARGUS' below the nav. The sub-pages will have the smaller logo in the primary nav. But on the homepage, it does not. My question is, after I scroll down past the larger logo on the homepage, is it possible to pop the little logo in the primary nav, centered? Then, when I scroll back up to the top of the page, the little logo pops back out. I say "pops," but a simple fade in and out would be fine, or even a slide down and up would be great. https://toucan-tetra-fwm2.squarespace.com/ p: argus Example: https://www.capsule-design.studio/

I am trying to have a specific block of text animate (I want the words to change) as someone scrolls down the page and wondering if anyone has encountered this or has any ideas to make it work. Essentially, I would like: -- As you're scrolling down the page and you get to the specific block where the text lives, I want that block to pin -- Then as you keep scrolling, I want the words in the text block to change. I don't want the text to move position, but rather I want it to appear as if the scrolling is changing the text from one set of words to another -- Once that text animates, then the section can be unpinned and continue scrolling. If I scroll back up then the text would animate back. Closest example i've found is from a different platform (except I don't want the background to change): https://text-changed-on-scroll.webflow.io/ Thanks for any/all help! EDIT: Found a couple similar examples on codepen: https://codepen.io/mmbotelho/pen/NLRLYN https://codepen.io/valoseg/pen/yLLzvBZ

Hi there, How would one implement such a long/slow/smooth scroll as shown on this example of the website? http://robinmastromarino.com/ When you visit one of his works, the scroll seems very bouncy, like eased. Kind Regards, Max, ish.

I have the setting on fixed but when a user scrolls down my header scrolls up halfway. I could understand about giving more real estate but I would like to see what it looks like if the header remains. I also have css so this may be affecting it as well. Here is the code. Any help would be appreciated. If I need to create a new thread I will. Thanks. Photos of what the whole banner looks like and then what the banner looks like when a user scrolls are also attached. /*this is for the logo */ .header { background-image:url(https://static1.squarespace.com/static/65d6a74d8df0af2a991fed5f/t/65dd39063098fa5161156db5/1708996871890/MoeCritiques+SS+2-26-24.png); background-repeat:no-repeat; background-size:100%; background-position: center; } /*this is for the header text = white */ body:not(.homepage) { header#header nav div.header-nav-item>a { color: white !important; } div.burger-inner>div { background-color: white !important; } } /*this is for the title display to none */ .header-title { display: none; }

Hi there! I applied an overlay scroll effect on my website. However, for some of the pages the section is getting cut-off or lagging when you scroll down. Is this something you would be able to help with? Looking forward to hearing from you!

Site URL: https://www.galballyobryan.com.au/ Hi! I figured out how to fix background image but am having trouble keeping the footer the same color. Would this be an issue with the code that I'm using? .section-background img { position: fixed !important; } Also, I would love to move the Nav bar below and have it show up only when I begin scrolling (like the inspo site). Thank you! My site: https://corbin-law.squarespace.com/ password: hsiung

Hey guys, I could use some help with a scroll animation. my site: https://studiobeni.squarespace.com/ pw: maria I'm trying to slightly spin the ball graphic on my site, below is the code I used, I see that the animation is applying but not on scroll. /**Initial State**/ .sqs-block-image:has([src*='ball']) { transition:3s; } /**Animate State**/ .animate.sqs-block-image:has([src*='ball']) { animation: spin 3s; } // keyframes @keyframes spin { 0% { transform: rotate(-0deg); } 50% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } } https://regrocery.co/ is the inspiration (scroll down to the section with the egg graphic to see the slight spin). I appreciate some pointers as I'm new to scroll animations.

I'm looking to do literally this to my header for my homepage. Any solves I can use with this??

I've designed this landing page for my website, and now i'm stuck on what process to take. I want the logo to be initially fixed and then the image to overlap on scroll. The logo needs to then shrink down to a monogram style version once we come to the second section of the site (the section below the landing page). The navigation menu links need to be sticky and where they are the whole time. Do I, a) have the logo set as a header title/logo or b) hide the header logo, just have the nav links to deal with and then have the logo as an image on the landing page? (shown here). if i do option b, this is what i need to do/need help with: Initial Setup: - Hide the header logo initially. - Implement the navigation menu links as sticky. - Make the menu navigation links vertically stacked, and left aligned to the full width of the page. - Add the circle icon above the nav links. Landing Page: - Display the logo as an svg image on the landing page. - Ensure it's initially fixed in position. Scroll Effects: - Use CSS or JavaScript to create the overlap effect of the image on scroll. - Make the necessary adjustments to ensure the logo behaves as desired during scrolling. Second Section: - Detect when the user scrolls to the second section. - Trigger the logo to shrink down to the monogram style version using CSS or JavaScript. https://www.moonlitdesign.uk/home-old

Hey there! I'm a CSS newbie, and implemented some code that worked at first but now it won't work at all after I deleted one of the site sections. I'm trying to create a sticky effect where the sections overlap one another and stick to the top while scrolling. However, my CSS is causing only the first and last sections to be shown and the others to be hidden. Any help would be appreciated! /* STICKY SECTION ON HOMEPAGE */ section[data-section-id="659a169e3ccbf36378dd37e5"], section[data-section-id="65dbdb890d4b603c5997cb58"], section[data-section-id="65d05d01ecf21f361a7ca870"], section[data-section-id="65d04e238ae412663b344509"], section[data-section-id="65d06f13e72f8b0e75c5c854"], section[data-section-id="65cff1c439fd0c4a7a68409c"] { position: sticky !important; top: 0; }

I'm trying to use the content module for "Scrolling" marquee but it doesn't scroll on mobile (Chrome on iOS). https://www.caveday.org/kindsofwork Can you help?

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

I'm looking to add and customize a horizontal scrollbar at the bottom of a website. I also want to embed a Lottie animation above the end of the scrollbar. Is this possible?

I embedded a coded CTA button that load an iframe on two different pages. The same exact Eventbrite embedded code on both CTA's. One works totally fine (scroll is not affected if I close the iframe): https://www.lnstake.org/chalk-walk-checkout-page This other one locks up after I open the embedded iframe and then close it, I cannot scroll unless I reload the page: https://www.lnstake.org/christmas-chalk-walk The iframe also flickers and seems to reload 2 or 3 times. The other one does not have this issue. What would be the cause of this error? Is there something on this last page that is causing the page to break? Update: I actually realized that the problem is I am using this embedded code multiple times. It worked fine on the test page because I only had one CTA compare to 4 on the bad page. So my question would be, is this happening because it is pulling the library 4x? How can i simplify this embedded code for buttons 2-4 on that page if the JS library is loaded? Here is the embedded code I used: <!-- Noscript content for added SEO --> <noscript><a href="https://christmas-chalk-walk.eventbrite.com" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript> <!-- You can customize this button any way you like --> <center> <button id="eventbrite-widget-modal-trigger-472644972837" class="eventbrite" type="button">RESERVE A SPOT</button> </center> <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script> <script type="text/javascript"> var exampleCallback = function() { console.log('Order complete!'); }; window.EBWidgets.createWidget({ widgetType: 'checkout', eventId: '472644972837', modal: true, modalTriggerElementId: 'eventbrite-widget-modal-trigger-472644972837', onOrderComplete: exampleCallback }); </script>

Hey there, I would like to add a vertical scroll dot section at the lower right side of the screen (indicated by a photoshopped jpeg), how should I do this? Ideally in a CSS format

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

Is there a way to assign anchor points to nav bar links so that when you click on them they jump you directly to a section of the current page - without re-loading the page? Thanks Dom

Site URL: https://codepen.io/tobiasthaden/pen/OVWKjm Hello there everyone! I was curious if anyone can help me with inserting this bout of code into Squarespace to change my background. I am curious if this is even possible, considering that from what I understand to change backgrounds we can only use CSS code? Am I wrong in that? Anywho, I'm looking to achieve the same effect as this groovy example . Any insight would be MUCH appreciated. xo

Hi, I've been trying to implement this code to allow an embedded scrolling image on my portfolio site. But not having any luck...I think this is not compatible with the fluid engine? I've been able to implement a number of css customizations, but would like to be able to present a website that was designed without having to post video of the site being walked through. Here is my site: www.chrispatrickcreative.com #PASTE-BLOCK-ID { height: 500px; max-width: 80%; margin:auto; width: 100%; overflow-y:scroll; overflow-x:hidden; filter: drop-shadow(2px 22px 40px rgba(0,0,0,.3)); @media screen and (max-width:767px) { height:200px; } }

Can someone help me so that my logo switches from our light logo to our darker one on scroll?