Search the Community
Showing results for tags 'scrolling'.
Found 109 results
-
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
-
Site URL: https://mauve-lobster-8khh.squarespace.com/ The gallery will not allow me to scroll to rearrange photos. Tried on Chrome, Safari and Firefox.
-
Scrolling text over a fixed background within a section
nsdoyle posted a question in Coding and Customization
Site URL: https://www.purehomeoffice.com/aspire-1 Heya I'd like to create a section with a fixed height of the window / media screen that scrolls through all the available text / content before proceeding to the next section. I found this bit of code that I believe will do what I want, but I don't know exactly how to implement it. https://codepen.io/aakhya/pen/QJWovp I attached a video to show what I'd like to achieve. Using 7.1, btw. fixed background scrolling example.mov -
Changing logo in header while scrolling down
eduardvanpagee posted a question in Coding and Customization
Hi all, I want to have a different logo on my header ones you scroll down. This is the case; The background of my website is dark, but if you scroll down, a white header appears. But because the background of the logo changes from dark to white, the logo is not nice on one of these backgrounds. Because of this I have created another logo and I want to add this in a way that if I scroll down, the logo also changes to the other logo with another logo. Basically; If I scroll down I want to see the alternate logo on my header. [See attachment] [I don't know if this is relevant] But, I have created the white moving header by using custom CSS -
Hi there community, Do you have any advice on how to make anchor links scroll gradually (slow scroll instead of instantaneous) to target page content? 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://yelvy.com/ Hi guys, I found this cool site: https://yelvy.com/ and I love how the images seems to stretch out and give the effect of multiple images stacking ontop of one another for a moment as you scroll. I've been trying on my own to figure out how to do this is Squarespace. Is it possible? The site seems to be using "scroller-wrapper." Does anyone know some CSS I could use to mimic this exaggerated effect on some product images I have on my site? I have tried playing around with 'transfrom:translate3d' and searching parallax injections but I'm still pretty new to CSS and any feedback/ideas would be appreciated! Some code from the website: <div class="scroller-wrapper" scrollbar="" data-scrollbar="" tabindex="1" style="overflow: hidden;outline: none;"> <article class="scroll-content" style="transform: translate3d(0px, -656px, 0px);"> Thank you, zz
-
Brine: Nav to change color after scrolling past Hero
AThompson_social posted a question in Coding and Customization
Hi friends, I am trying to trigger my navigation to change color after scrolling past the hero. Is there a way I can trigger the change by div or pixel? I currently have my nav as a sticky nav and want to keep that. this is what I'm working with. /*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/ Header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; background: #173d56; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; } any help would be GREATLY APPRECIATED link to site -
Hello ! I'm wondering if there is any way to modify the index navigation tool in Brine template, so it can display sections titles at all time. I'm talking about this kind of side bar, displayed as dots, radio, or bars... The sections titles are only visible while you hover the dots. The idea would be to keep them visible, so it would look like a index side menu. Thank you !
-
Site URL: https://www.favillastudio.dk/workshops Can anyone help. I love this site - https://www.favillastudio.dk/workshops and I really want to get my images to do the same with the scrolling and zoom fuction when you scroll down the page. I know theres the reveal animation option but I want it to be stronger like the favilla site and also to have the zoom function once its been revealed. Any help would be welcome 🙂
-
Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-v11 Hello, I am trying to add this scrolling animated banner (not sure what it's actually called!) similar to the one on this site here midway: https://oki-ni.com/ I want to use it to add my own marketing messages like 'FREE SHIPPING' or something similar. My site is here: https://bluebird-porcupine-yzdg.squarespace.com/home-v11 pword = bluebird Is it possible to do this? Please help. Many thanks. Best, Faizal -
Hi, Is there any CSS coding or code injections for parallax scrolling in 7.1? Thanks @tuanphanor anyone else?
-
Header change to block colour when scrolling (7.1)
Just-Adam posted a question in Coding and Customization
Site URL: https://chicken-mango-5dmp.squarespace.com/config/ Hi wonderful tech gurus, For the header of my site I have already now coded that the header is transparent, and scrolls down the page with you as you move down. What I am trying to do now is turn the header back to having either a white or black background that comes into effect as soon as you start to scroll down the page. Staying transparent at top, changing to coloured background when moving basically. And to do this across all pages. Thank you in advance wonderful people A -
Hello, can you please help? I would simply like to have my site do the following: 1. When you click the back button in a browser, it takes you back to where you were on the previous page. Currently, it takes you back to top of page, which is frustrating if you were 10 images down in a gallery or on mobile. I am okay with a load time... 🙂 Is this possible on Squarespace? Example can be found here: https://www.nicholaskonert.com/art Thank you for your help and support. -
Site URL: https://karpov.paris/ Hi guys, I saw this scroll effect on a website (Shopify though) but it looks really good and I'd like to hear if any of you guys knows how to create something similar? You can see it on https://karpov.paris/ Screen Recording 2020-06-12 at 21.07.43.mov
-
Site URL: https://mrmiyagi.com.au/home/ Hi! I am trying to create a 'one page scrolling site' for my client. The menu bar essentially will link and scroll down to sections of the website on the one page, rather than multiple I used to be able to create this on squarespace but am unable to in 7.1. Any help is appreciated!
-
Scaling down a scrolling banner for mobile
Media_Career_Advice posted a question in Coding and Customization
Site URL: https://www.mediacareeradvice.co.uk/ Hi, I've used html code to make my homepage banner scroll. It looks great on a desktop but on a tablet or mobile it hasn't scaled down. How am I able to get it scale down for mobile but also work properly on a desktop? -
Site URL: https://cranio-fm.ch/ Hello there! I have this two language site. I created the menu with folders instead of putting the pages in the main navigation. The reason is that I don't want the two languages showing up in the top menu section. You can now see the different pages which are in the folder appearing on the left side of the page which is good. When scrolling up or down however, the folder moves with the page instead of staying in place. Is there a possibility to fix the navigation folder by injecting additional code? Thx! F
-
Site URL: https://rustungcuenca.squarespace.com Hello everybody, hope someone can help me with a little problem im having I have set up my page so when you click on contact (contacto) or About us (acerca de Rustung) it will scroll down smoothly no matter in what section I am, it works perfectly on computers however it doesn't work on cellphones, it won't open the page mentioned (contacto and acerca de Rustung) ill leave a video link on wetrasfer with the way how I set up the page, and the problem im having!! hope someone can help me figure out this 🙏 https://we.tl/t-Eb9dIRZS34
-
Transparent Fixed Navigation to White When Scrolling
alishaserre posted a question in Coding and Customization
Site URL: https://www.wethewell.co Hi, I am currently on the Bedford Template. I have implemented the following code to allow the transparent fixed header at a larger height, but I am needing to have my fixed header turn white or background color when I scroll past the banner. How can I do this? (Site password: scocreativeclient) Current Code in Custom CSS- header#header { position: fixed !important;} #logoImage img { height: 125px !important; max-height: 100%; } .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 100px 0 200px; } -
Hello, I am setting up a blog using 7.1 and would like it to show as an infinite scroll. Does anyone know if this is possible? Is there a way to override the 20 post limit? I can code the summary block to exceed 30 posts but I need to use categories and these take the visitor back to the original blog. Any help or feedback would be greatly appreciated. Thanks! Marcus
- 1 reply
-
- 5
-
-
- blog
- squarespace-7.1
- (and 1 more)
-
Remove Index menu when scrolling to bottom of page: TREMONT.
dbeesley posted a question in Coding and Customization
Hi, I would like to remove the index page from appearing at the bottom of a page when I scroll down whilst using the Tremont template. I have attached a link to the website to illustrate my point. https://www.slld.lighting/varde-partners-st-james-market Is there code I can use to stop this from happening? Thanks -
Hi there, I have seen variations of this question asked but none of the suggested solutions have worked. I'd like to stop the header from reappearing on scroll-up, and only have it reappear once the user reaches the very top of the page, is its possible to achieve this just using CSS? Many thanks, Rory.
-
hey guys, my english is not that good but i try to explain my question. I would like to build a one page website with a "scroll lock" effect. Is there any css code or tutorial how to make this effect? You can see this scroll effect at https://workflow-films.de Thank you and best wishes from germany! Dani -
Site URL: https://www.recaprabbithole.com/recap/human-viruses I cant scroll on android phones. I am using some custom CSS, that @tuanphan helped create (thank you!), to make images stretch across the entire screen on my blog posts, here: @media screen and (max-width:767px) { /*This stretches the everything across the screen on the blog posts*/ /* make image fullwidth */ .blog-item-wrapper article.entry { padding-left: 0; padding-right: 0; } /* Add padding around text blocks, both sides, leaving out, image/gallery/embed - blocks */ .blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block, .gallery-block, .embed-block) { padding-left: 9vw; padding-right: 9vw; } /*This code fixes the iphone horizontal scrolling, but stops all scrolling on androids*/ html, body { overflow: hidden; } } I know the piece of code that is causing the issue: /*This code fixes the iphone horizontal scrolling, but stops all scrolling on androids*/ html, body { overflow: hidden; } But without this code above, the mobile site has a black bar on the right-hand side, allowing strange horizontal scrolling on iPhones, see attached video for issue without red code. How should I revise this code, to allow scrolling on android phones? @paul2009 Do you have any thoughts?
