Search the Community

Site URL: https://sswebdev-one.squarespace.com/ Site URL: https://sswebdev-one.squarespace.com/ The password for our site is: secret Here are the steps to reproduce the issue I'm trying to solve: 1) Go to the "Contact Us" page at: https://sswebdev-one.squarespace.com/contact-us 2) Adjust the width of your browser so that it's narrow enough to have the mobile hamburger menu display. 3) Scroll down the page so that the black background appears in the header area. 4) Click on the mobile hamburger menu. Actual Result: The website header text "Test Site" appears in white and it's not visible. Desired Result: I would like the "Test Site" text to appear orange. I defined this CSS (for the "Initiatives" and "Contact Us" pages): #collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 { .tweak-fixed-header .shrink.header .header-title-logo a:after { color: orange!important; } } but I think this CSS (below) is overriding the CSS for the "Initiatives" and "Contact Us" pages: /* Set font color of site title text to white on scroll */ .tweak-fixed-header .shrink.header .header-title-logo a:after { color: white !important; } Thanks in advance for any suggestions you have.

Site URL: http://www.ryanewanchuk.com Password: SquarespaceDemoHelp! Hi, I am working on my site, and I've decided to use it as a sandbox to try to do some more advanced things. In particular, I am trying to figure out how to make my navigation bg colour change to match the bg colour of a section on scroll. I'd like it to change when 90% of the next section is visible. An example of this is at https://www.bynd.com/ I'm sure this would involve anchors and javascript, but I was curious if there was a simpler way to accomplish this?

Site URL: https://willlai.com I want to scroll smoothly from top to the contact block when I click the "Contact" in the menu https://willlai.com

Hello, I am building a single page website where I have added a custom navigation to the top with anchor links that make the page scroll to their specific section. Everything works fine except the third and last link, supposed to send you to the contact form, last section before the footer. When clicked it scrolls to the wrong place, on a section before the correct one. It goes to the right spot just on the second click. I have tried with 3 different coding solutions, all involving jQuery and they all behave the same way. Any idea why this could be happening? Thanks 🙂

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.

Site URL: https://www.imperialcitizenship.squarespace.com password: imperialcitizenship Hi, I need help adjusting the animation of my code. Currently, this animation start at the edge of the screen on the right. However, I want it to start in the center filling up my whole screen then infinitely continuing. How do I adjust the code? Animation starts at the right: What I want, animation starts in the middle and also going out to the far left of the screen: Existing code: //SCROLLING VERTICAL TEXT .vertscroll { margin: 0 auto; white-space: nowrap; overflow: hidden; position: absolute; } .vertscroll span { display: inline-block; padding-left: 100%; animation: vertscroll 60s linear infinite; } .vertscroll2 span { animation-delay: 30s; } @keyframes vertscroll { 0% { transform: translate(0%, 0); } 100% { transform: translate(-100%, 0); } } <h4 class="vertscroll"> <span>Antiqua and Barbuda&emsp;&emsp;Dominica&emsp;&emsp;St. Lucia&emsp;&emsp;St. Kitts and Nevis&emsp;&emsp;Grenad&emsp;&emsp;Cyprus&emsp;&emsp;Malta&emsp;&emsp;Turkey&emsp;&emsp;Vanuatu&emsp;&emsp;Montenegro&emsp;&emsp;Greece&emsp;&emsp;Portugal&emsp;&emsp;</span> </h4> <h4 class="vertscroll vertscroll2"> <span>Antiqua and Barbuda&emsp;&emsp;Dominica&emsp;&emsp;St. Lucia&emsp;&emsp;St. Kitts and Nevis&emsp;&emsp;Grenad&emsp;&emsp;Cyprus&emsp;&emsp;Malta&emsp;&emsp;Turkey&emsp;&emsp;Vanuatu&emsp;&emsp;Montenegro&emsp;&emsp;Greece&emsp;&emsp;Portugal&emsp;&emsp;</span> </h4> Thank you!

Site URL: http://www.allkings.org We had been successfully using the code shared here in this tutorial: https://www.launchthedamnthing.com/blog/use-parallax-in-squarespace-71 Until last weekend, we hadn't made any changes to the site and suddenly the parallax is off, and the layers are overlapping. I've disabled the script for now, but wondering if there may have been an update to 7.1 that would have changed things? We're still on that same version, and the tutorial is there to match it, but the problem is there.

Site URL: https://www.longevitycollective.com/newsletter I am trying to disable scrolling on desktop only on one page (I want to still be able to scroll on mobile). Here is the code I added to the header to disable scrolling: html, body {width: 100% !important; height: 100% !important; overflow: hidden !important} I've only been able to find posts about completely disabling desktop and mobile, or just mobile only. How can I fix this?

Hey y'all - very new to jquery here. I found this jquery posted on Stack Overflow on how to redirect the user to a new page once they have scrolled to the bottom of the original page with the following code: $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) window.location = "page2.html"; }); However, I'd like the function to delay for about 2 seconds so the transition isn't so jarring. I've tried to implement setTimeout, but still don't have a solid grasp on jQuery syntax/language to figure it out. Would love any help, thank you!

Site URL: https://www.anqi-wu.com/ hello! i'd like to add a scroll to top function on my website (placed on the bottom right hand side of the website). any help on coding for custom css to add this function to my website would be greatly appreciated! i'd like to use this icon for my scroll to top button: thank you!

Hey Guys, I'm looking for a way to best present my portfolio websites by adding a scrolling image block. See example attached. Does anyone know how to do this? Thanks, Tasha Screen Recording 2021-02-25 at 15.01.14.mov

Site URL: https://www.similarspace.ca/saol-nua Hi All, I've been trying to resolve a scrolling issue on my split screen sticky scroll pages with absolutely no luck. I see you have some experience in this area, and I would really really appreciate any help! Our website: https://www.similarspace.ca/ I was provided a code snippet to create the split screen sticky layout. I adjusted the code to target all 8 of the pages we'd like to use it on. The split and sticky left column work just fine, but when you reach the following full width section it overlaps the text on the left-hand column when we'd actually like it to register when the text ends and become sticky to scroll with the right side. Pages affected are all the ones linked on our work page: https://www.similarspace.ca/work In the attached video I've walked you through the issue as it appears on the page 'saol-nua' and then how it should appear as displayed on the page 'enso'. For some reason, the scroll is working correctly only on this one page, and the remaining 7 run into the overlapping text issue. I don't have much coding experience, so there's a chance I've just mushed something up while trying to apply the text to multiple pages. Below is the code I have in place. I would love some help getting the scroll nailed down properly on all our work pages. /// SPLIT LAYOUT /// // #collection is the ID for a specific page // #collection-5fd247825d5a16174f514a4d, /* split layout example */ #collection-5fd3b8a3d018754912c7d361, /* saol nua */ #collection-5fd7c10e718a7b4790835611, /* enso */ #collection-5fd7c83d2d5c2d705758af21, /* iwo */ #collection-5fd12e5c5767704c6ef3fa9b, /* obabika */ #collection-5fd7d7ab0d8882116ba91933, /* hunter & hare */ #collection-5fd7e8077be9e476c9b382d9, /* fed */ #collection-5fd7eb3716b55c49c44392bf, /* wirth */ #collection-5fd7ebf262243e10b9ea2cb8 /* hanune */ { @media (min-width:900px) { .sections { display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-section { width: 100% !important; } // LEFT Section ID // section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */ section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */ section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */ section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */ section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */ section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */ section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */ section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ { width: 40% !important; margin-top: 0px; } // RIGHT Section ID // section[data-section-id="5fd247aa329e0a201fd99043"], /* split layout example */ section[data-section-id="5fd3c683b5127b6b8416ddf2"], /* saol nua */ section[data-section-id="5fd7c10e718a7b4790835615"], /* enso */ section[data-section-id="5fd7c83d2d5c2d705758af25"], /* iwo */ section[data-section-id="5fd2a76ef1e0381452c66c0e"], /* obabika */ section[data-section-id="5fd7d7ab0d8882116ba91937"], /* hunter & hare */ section[data-section-id="5fd7e8077be9e476c9b382dd"], /* fed */ section[data-section-id="5fd7eb3716b55c49c44392c3"], /* wirth */ section[data-section-id="5fd7ebf262243e10b9ea2cbc"] /* hanune */ { width: 60% !important; } .page-section >.content-wrapper { box-sizing: border-box !important; } } } // Make the LEFT Section Fixed // body:not(.sqs-edit-mode) { @media screen and (min-width:991px) { section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */ section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */ section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */ section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */ section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */ section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */ section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */ section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ { position: block; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; width: 100%; top: -1px; } } } Thank you!!!! 4943648_SplitScreenScroll-StickyLeftColumn.mov43.59 MB · 2 downloads

My client's website is growthleadersgroup.com There is a left/right shift on mobile where you can basically grab the screen and move it left or right and then it will spring back when released. a horizonal scroll? I cannot figure this out!

Site URL: http://zackmadrigal.com Hi everyone, I'm trying to remove a back-to-top button from showing up on mobile. I've added the below to my css which hasn't worked for me. Any suggestions? Thanks for taking a look. Zack /* remove back to top mobile */ @media screen and (max-width:767px) { .back-to-top { display: none !important; } }

Site URL: http://arriverailside.com/#arrive I am trying to add a more animated scroll down arrow on my home page at http://arriverailside.com/#arrive. I am using different recommendations for inserting custom css on the design page, however I keep getting a syntax error on line 1 message. I am thinking it may be related to the message that says "Note: Custom CSS does not apply to Cover Pages." But I am unsure about this. Any help would be greatly appreciated. Thanks. This is what I am trying to add: body{ margin: 0; padding: 0; background-color: #000; } .arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .arrow span{ display: block; width: 30px; height: 30px; border-bottom: 5px solid #06A8FF; border-right: 5px solid #06A8FF; transform: rotate(45deg); margin: -10px; animation: animate 2s infinite; } .arrow span:nth-child(2){ animation-delay: -0.2s; } .arrow span:nth-child(3){ animation-delay: -0.4s; } @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } }

Site URL: http://www.studiofurks.com Hello, I was trying to add a gradient to the top of the page/navigation so that when the user scrolls up it fades. Example below: https://mvsm.com/play

Site URL: https://sheep-badger-7tzn.squarespace.com/ Hi all! I've seen a variety of questions on this topic but was unable to find one that was specific to my issue. I like having a fixed navigation header at the top of the site, but it is so large that when I scroll down it blocks a lot of my images. Is there a code that I can use to shrink the entire header as I scroll down so that it becomes much thinner? Thanks in advance!

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

Site URL: https://www.yichongz.com/ .scrollup { width: 48px; height: 48px; opacity: 0.8; position: fixed!important; bottom: 20px; right: 40px; z-index: 1; display: none; text-indent: -9999px; } I used the code like this, and insert the block into the footer. But the problem is, I want the scroll up button float and fixed on the screen, but if I put the block in the footer, it just stays in the area of the footer. I tried adding a block outside of the future and those codes work well. However, I don't want to insert new block in every page. Does anyone know how to deal with the blocks in the footer? BTW, I've used these codes for a long time, and everything looks good when I first implemented it. Did the Squarespace upgraded these days?

Site URL: https://www.smoredate.com/ Once the web page loads, I want to automatically jump to a section on the home page without using anchor links or having to press a button/click a link. I created a redirect using div as below: <div id="scroll-here"> </div> It takes you to the Home page on the navigation bar with the anchor tag in the url slug--> /home#scroll-here Then I set up a script in the landing page where I want the auto scroll to work: <script>var url= "https://www.smoredate.com/home#scroll-here"; window.location = url; </script> The code works on the front end but Squarespace dashboard never stops loading, I'm assuming it's jumping between the two home pages: the one on the navigation bar and the landing home page! Where did I go wrong?! :(

I installed an anchor link on my homepage in Squarespace 7.1 and when i click the link it jumps to the section instead of scrolling down to it. I'm using a CODE block with a DIV ID in the section I want to scroll to. see code below: <div id="pp"></div> and for the text link I put: /homepage/#pp It doesn't scroll, it just loads the section that has the Code Block with ID. Any help is appreciated. Thx

Through css? Like some images I want to scroll horizontally on web.

Site URL: https://levelmusic.com/ Hi, I'm wondering if it's possible to achieve something similar to the linked page? Where an icon follows you while you scroll and denotes how far you are on the page? The website I'm trying to achieve this on is https://hyype.squarespace.com/ and the password is hyype. Thank you!

Site URL: https://www.aaline.ca/beta-product-page-v3 Hi, I have a question regarding making a split sticky section on product pages. Here is the page:https://aaline.ca/beta/linear-embedded-azw3l I'm trying to keep the product image sticky, while the left side scrolls down and shows the dropdowns with more product information. However, if that is not possible I've been trying to implement the same thing, but on a regular blank page: https://www.aaline.ca/beta-product-page-v3 I've tried using CSS code from another forum post, but it did not work. I would appreciate any help I can get. Thank you!

Site URL: https://www.uswtop-upphotography.com/ Hi there, Im looking to remove the footer just from this specific page: https://uswtop-upphotography.squarespace.com/introduction And also this page as-well as taking away the excess footer so theres no scrolling? : https://www.uswtop-upphotography.com/publication Thank you for all your help, I hope this made sense! Lewis