Search the Community
Showing results for tags 'scrolling'.
Found 69 results
-
Hi all, Looking for some help in trying to do a fixed header on the Mentor template. Any help is much appreciated! Thanks!
-
Hi there, I'm looking for a way to get the header/navigation bar on my website to scroll down the page as a user scrolls. I have the Brine template. It does it automatically on mobile but not on desktop. Customer support said there isn't a way to do this natively. Anyone have some code they could suggest? Thanks! Ariana
-
How do I fix the scroll bounce on my homepage?
BeeperChirp posted a question in Coding and Customization
Hello! The homepage to my website is simple and clean. Though there's not much content on it, its current state still has a slight scroll to it. Is there a way to add custom css to my homepage so that it doesn't scroll? I'm using the York template. One added challenge: I don't have a business account, which means I can't use the Header Injection Code. To save money, I'd prefer to do this through the Custom CSS section. I'd love some guidance! My portfolio: https://www.nateburdette.com/ Benchmark example (see how it doesn't scroll, it simply sits in place): https://eriksena.com/ Thank you! -
Hello, I have a Forte website and I would like to have my galleries scroll horizontally, not as a carousel, but simply one next to the other. I've been looking at this for years. Here's my website https://www.arnaldoabba.com/overview-1 Any help would be very much appreciated, thanks
-
Hi guys! I've seen a few websites with parallax scrolling on one of their pages and then the next page below is enabled. I think that's such a cool feature that I would love to implement. I searched the web for a long time to try to find the code for this but I just got this link https://blog.alexgittings.com/disable-parallax-on-one-squarespace-page/ with a code, but I have no idea where to put the code as it's poorly described. THIS IS WHAT THE ARTICLE SAID: To do this you will need to inject a script into the page. Navigate to the page cog and select advanced and enter the following: <script> Static.SQUARESPACE_CONTEXT.tweakJSON["tweak-overlay-parallax-enabled"] = false; </script> Once saved the parallax feature for that page should be disabled. But I have no idea where to put this code. Do any of you have any suggestions or know of another way? Thank you! Eager to hear back 🙂
-
I have seen a site that I really like that scrolls as if layered. Is there a template like this that I can start with? I am just trying to find something like it to work with Thanks https://www.clicsargent.org.uk/corporate/impact-2019/
-
Hello! My website is http://www.deepseaminingsyndicate.com/ Everytime I make pages with text blocks they all end up having scroll bars per text block. Is there any way to fix this? or Custom Code I can use to force the text boxes to stay framed. The issue is that when users scroll down if they are using their scroll wheel on their mouse or trackpad and the mouse is inside one of the text boxes the page gets stuck trying to scroll the text block which doesn't have any extra characters or info to scroll to. Happy to inject the code into the boxes themselves if thats the best fix or if there is something more generic I can do to the page settings. For reference im on the Sonora template. Thanks, Evangelos
-
Bedford Template causes horizontal scroll on mobile
MimiDev posted a question in Coding and Customization
I have been given the task of admin on a site and I am totally unfamiliar with SqSp. (I am otherwise a developer that usually develops on other platforms/CMS's) The issue with the site is that the page is too wide for mobile and causes a chronic amount of horizontal scrolling. The previous developer apparently found a solution by adding the viewport meta tag to the Custom CSS area! {huh??}. While this does fix the horizontal scrolling issue, it introduces an error in the Custom CSS (of course) and then the standard formatting on desktop/laptop causes the #page content to be narrower than it should be. The template in use is Bedford and this is the meta tag code added in the Custom CSS area: <meta name="viewport" content="width=device-width, initial-scale=1"> (I have tried adding this to the 'Advanced' area of Page Settings - and removing it from the Custom CSS, but it has no effect. Still too wide on mobile, but desktop display returns to normal width) I would love it if anyone more familiar with SqSp might be able to point me in the right direction please. I've tried having a look via browser devtools but I can find nothing. NOTE: ** if viewing in a browser, only Chrome emulates the mobile display issue correctly. Firefox does not. The mobile display of the site in SqSp admin also displays correctly. The site is at robe.com.au Thanks in advance if anyone should have a look. -
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. -
BRINE Template Stick Nav with Black on scrolling
jasonconway posted a question in Coding and Customization
Hi Everyone, I've created a client site using Brine and set the navigation to float on the header image. But, I really need to have a sticky header so that when scrolling, the nav section switches to a black background. I used some code which does make the nav sticky, but this does not switch the navigation block, so, the links are currently not viewable when scrolling over the rest of the page. Header { position: fixed !important; top: 25px !important; left: 0 !important; right: 0 !important; } I want the header to be sticky on all pages. I hope there is an easy fix for this? Many thanks in advance. -
Hi everyone. I'm using Squarespace as a tool to post announcements in my app, like the following screen. (Banner A/B/C is different pages and click them can open a in-app webview of that page. I already got few of them running on my app.) FYI image >>> https://imgur.com/axl1UQj My question is: Can I use Squarespace to automatically combine all my pages as a continuous view? For example, when I open Banner A, I can scroll to the bottom of it and Banner B can automatically show up and Banner C/D/E... etc. Which means, after click every banner, it still shows its page but you can scroll up and down to see former/later pages. I saw there is Infinite Scroll function in tutorial, but only for certain template and I'm not sure it's suitable for my case. https://support.squarespace.com/hc/en-us/articles/217417087-Infinite-Scroll Please share the solution with me or where I can find the answer. Thanks and happy new year!
-
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 -
Hello, Does anyone know how to change the colour of the header when it is set to scroll back? The header at the moment... https://cone-crane-lzcy.squarespace.com/ (pw 'stephsbeauty') appears as black when you scroll back up but I would like to change the colour if possible. Thanks in advance. Kind Regards, Sophie
-
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 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
-
Hi there! Does anyone know how to do snapscrolling in Brine template with css? Like the first section of this website: https://www.serta-japan.jp/special/?utm_source=gkt&utm_medium=cpc&gclid=CjwKCAiA_MPuBRB5EiwAHTTvMUb8pOQQ0MqIZhy2gjd57Essi_Xj0FOn7CSJJ3Dkpch_XVxCzg7RhxoCWEQQAvD_BwE&fbclid=IwAR0xZQg6nv2lYHsLmuCxmQ0-gRMqeB7HC2pfAucptG7njcpA9kWIcIDqK8Y Thanks a lot in advance if someone can help. Sheri Lai
-
Hello there! Does anyone know how to make the index first section fade out on scroll without affecting parallax enability on other sections or pages? I found this turoial before but it doesn't explain how to disable the parallax effect on just one page. It will be highly appreciated if someone could help me here! Thanks a million! Sheri
-
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 -
I'm customizing a site (see here). One thing I've noticed is that the navigation bar, which retreats & then scrolls back into view on the homepage as you scroll down through the sections, doesn't replicate that behavior on other pages. For example, the blog page, or one of the other program description pages which has longer scrolling content. It looks like the class 'show' is being dynamically injected after the first page section on the homepage. 1. WHY? (more of a rhetorical question...) 2. How to copy over this scroll/hide/reveal behaviour to the other pages - not just home? -
I would like to find the code to stop the logo from scrolling along with the site on the Tudor template. Either that or put a white background behind it. Any suggestions? Thanks so much! :) -
I have this issue where only on Safari I can nudge the content to the left with the content on the edge moved out of the browser window. In an effort to reduce the content to the bear minimum, I created the following page with no header, no footer and just a simple text block (sorry for the dark on dark - but it is readable). If you view this page on Safari, you can move it to the left so that the first two letters of the sentence leave the browser window. How can I stop that from happening? Here is the test page I'm using https://www.pfiphoto.com/test2 Thanks.
-
So I have my logo top center at 500px and underneath it, centered, is my navigation bar. I would like to be able to scroll down, past the logo and then lock my navigation bar (along with the header color background) to the top of the screen so it's always there, across the whole site. I haven't yet found a custom css code that does all that. I was hoping someone could point me in the right direction. I've uploaded two screenshots. The first representing the before, with the logo, and the second being the after, once you've scrolled down and the nav bar locks into place at the top. Thank you!!!!- 10 replies
-
- 2
-
-
- scrolling
- navigation
- (and 2 more)
-
How to make the first index page fadeout by scrolling?
sherilai posted a question in Coding and Customization
Hello there, Does anyone know how to do make the first index page fadeout by scrolling? Like the website below: https://www.serta-japan.jp/special/?utm_source=gkt&utm_medium=cpc&gclid=CjwKCAiA_MPuBRB5EiwAHTTvMUb8pOQQ0MqIZhy2gjd57Essi_Xj0FOn7CSJJ3Dkpch_XVxCzg7RhxoCWEQQAvD_BwE&fbclid=IwAR0xZQg6nv2lYHsLmuCxmQ0-gRMqeB7HC2pfAucptG7njcpA9kWIcIDqK8Y I am planning to use Brine template. Thanks in advance if someone can help! Sheri Lai -
Hello! I am looking for a way to embed a scrollable list on a page of my website to keep a lot of information that doesn't fit into the events or gallery format contained enough to be manageable. I would only really need it to hold text but text and dividers would be ideal. Do any of you know of any resources like this?
-
Hey all! First, I'm not a coder. ☹️ That said, the previous and next blog post cues are way too close together. Here is an example of what I'm talking about (the very bottom): A Blog Post I need to adjust right width of previous and the left width of next. I'm using the Brine template. I'm also uploading a screenshot. Basically, where the arrow is in the screenshot, I want a bunch more white space between the left and right bottom of the blog (previous and next) nav. Would greatly appreciate help on this! Bob
