Search the Community
Showing results for tags 'scrolling'.
-
Site URL: https://pumpkin-lime-8bna.squarespace.com/ Hello I've got some scrolling text as an announcement bar in this site https://pumpkin-lime-8bna.squarespace.com/ pw AWC123 It's currently got a huge blank gap between scrolls, I'd love for it to be on a continuous loop rather than having a gap between loops. Is anyone able to help? This is the code I've used to get it to this so far below. Thanks in advance. .sqs-announcement-bar-dropzone { position: -webkit-sticky!important; position: sticky!important; top: 0!important; z-index: 9999!important; } .show-on-scroll-wrapper.show { display: none!important; } /* Removing the underline on link in the announcement bar */ .sqs-announcement-bar-text a{ text-decoration: unset !important; } /* Adding left and right padding, change to match your site padding if needed */ .sqs-announcement-bar-text{ padding-left: 40px; padding-right: 40px; } /* Hiding anything that extends beyond the screen */ #announcement-bar-text-inner-id { margin: 0 auto; overflow: hidden; } /* Starting the text off of the screen and adjusting width, change the animation: 15s to however long you want the marquee to take in seconds */ #announcement-bar-text-inner-id p { display: inline-block; width: max-content; padding-left:100%; will-change: transform; animation: marquee 25s linear infinite; } /* Stopping the marquee on hover so people can click on links */ #announcement-bar-text-inner-id p:hover { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
-
Site URL: http://www.orlandoeventmedia.com Hi all. Right now I've got an infinite scroll website with anchor links. Here's what I'm wanting to accomplish: A link in the top navigation to a separate blog page A summary block of the blog above the contact section near the bottom of the homepage. Obviously if someone clicks on one of the summary links it would direct them to that blog post in the above. I'm running into a problem though. Because I'm using anchor links in the navigation, when someone is redirected to the blog page those navigation links no longer work. Is it possible to do the above and have the navigation links on the blog page direct back to the appropriate section on the homepage? Or is there another solution which is comparable? -
Site URL: https://www.houseofurbansports.nl/activiteiten Hi all, We work with a third party booking system and since the update of the system the following issue occurred. When you go to the page: https://www.houseofurbansports.nl/activiteiten it scrolls automatically to the i-frame that has been embedded. Anyone here that knows how to prevent the auto scroll to the i-frame? This is the code that we embedded: <iframe src="https://booking.leisureking.eu/bm/339c196593014cccf5c349a5676ca4c7" frameborder="0" id="lk-booking-window" loading="lazy" style="width:100%"> <p>Your browser does not support iframes.<br> <a href="https://booking.leisureking.eu/bm/339c196593014cccf5c349a5676ca4c7" target="_blank">Open venster in nieuw tabblad</a></p> </iframe> <script src="https://booking.leisureking.eu/bm/scale.js"></script> Thanks in advance. - nicholas tangerine
-
Site URL: https://bsafe.best/features Hi! I'm having an issue with multiple sites where the navigation bar has on-page anchor links that smooth-scroll to various sections. When the user clicks it - regardless of mobile or desktop - the page scrolls past the heading into the body of the section. I've tried using #page-section-pagesectionnumber and #custom ID as anchors with the same result. This is the smooth scroll code I'm using: ///SMOOTH SCROLL/// html { scroll-behavior: smooth; } Password is bSafe. Note: the fixed-position header appears to be the culprit. Is there a way around it? -
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 -
Site URL: https://probus-surgical-centre.squarespace.com Trying to reduce the top and bottom padding on the scrolling text section on my site https://probus-surgical-centre.squarespace.com to match the green text block under the header. password: wellbeing2022 Thanks!
-
Site URL: https://www.the-consultancycollective.com/ Hi all, Wondering if there is a way to make scrolling logos bigger on mobile? Happy to show just 2 at a time / make it slightly deeper as a solution just not sure how!
-
I want to show the menu only on scroll up. There is a js for this. I am dumb and can't figure out how to install. Help? Here is the code: https://wicky.nillia.ms/headroom.js/
-
Site URL: http://www.rejuvemedicalspa.com When pages load on our site they are slightly zoomed in (first image). This allows users to scroll horizontally (second image). This is not the desired experience. If you pinch to zoom out then release, the site settles into a slightly left justified format (third image). At this point the site scrolls normally, only vertical scroll. Any idea what we can do with settings or CSS to default to a non-zoomed in state (only vertical scroll)?
-
I have found many useful things here and elsewhere about adding a "Scroll To Top" button in the corner of my page; I would love to be able to make it appear once you have gone down some in the page, not at the beginning. However, everything seems to require access to the Code Injection feature, which is frustratingly only an option for the Business or Commerce level sites, not regular Premium/Personal. Does anyone know a way to do so without the Code Injection process? Thanks. -
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: https://www.coorlasarch.com Is it possible to add a "Use ctrl + scroll to zoom" (Similar to google maps embed) on other 3rd party embeds? I have 360 spherical views on my website, and when users scroll through the interactive 360 view (embed), they tend to get caught in a virtual world. Perhaps this is only achievable through the 360 View hosts code? -
Site URL: https://accordion-jaguar-tztz.squarespace.com/config/ Hi, how do I add a button at the top of the footer that allows the page to scroll to top of page? Option 1: I have a friend who also built a Squarespace site, and I'd like to do the same as his, so it sits on the line: Option 2: Either this or a floating arrow that fades in appearing on the right hand side as you reach the end of the page; this guy has a tutorial showing you how to do it (https://www.will-myers.com/articles/building-a-back-to-top-button-in-squarespace), but I don't have Premium, so I don't have the Advanced code injection available - is there anyway to add that type of thing on Design > Custom CSS? Many thanks for your help! Tomm -
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 -
Site URL: https://jaclyncdesign.squarespace.com/ Hello! I'd like the logo in my header navigation to appear only after I start scrolling down the page. Preferably right after the other logo image disappears. Can someone help me accomplish this? https://jaclyncdesign.squarespace.com/ Password: Help2022
-
Adding Scroll Down arrow to Gallery or Slideshow
TrevorG24 posted a question in Coding and Customization
Site URL: http://trevorglynos.com I need some help adding a "scroll down" arrow at the bottom of a section on my home page. I want to use this animated arrow from Codepen https://codepen.io/flik185/pen/WxwLdX but there's no way to add code to a gallery on 7.1. I can't add a code block or any other block for that matter since Squarespace doesn't allow that at this time. URL for my site is http://www.trevorglynos.com I need the arrow on the bottom of the slideshow on the home page. Any help is appreciated, thanks! -
Site URL: https://www.mgfoodstuff.squarespace.com I'd like to create the same text transition that happens on Squarespace's own homepage: https://www.squarespace.com/ Specifically the 'Sell Anything' text that moves horizontally as you scroll down. Anyone know how to achieve this?
-
Site URL: https://www.bodyandbraincoaching.co.uk/ Hi, I have used the new scrolling bar on the home page of this website. It's linked to a section at the bottom of the page. It works perfectly on desktop and Android mobiles, however it does not work using Apple safari on mobile. Do you know if there is a way to fix this so it will also scroll on mobile Safari? Thanks!
-
Site URL: https://www.alperkologlu.com/ Hi there, I'd like my portfolio titles appear over gallery images on mobile as I scroll down. I have the code below added as custom CSS that kind of does it but unfortunately not in a tidy way. For some reason the portfolio image gets a darker overlay which then goes lighter, instead of staying darker. I was wondering if there is way to remedy this issue. Thank you all in advance for your help. @media screen and (max-width:640px) { .portfolio-text:hover { opacity:1 !important; background-color: rgba(0, 0, 0, 0.4); } } -
Site URL: http://www.dandelion-drum-w9ws.squarespace.com I entered code to get my "back-to-top button in place, and there is a weird overlap, rather than the image laying perfectly over the button. Here's the css I have entered: #back-to-top{ height:45px; width:45px; position:fixed; padding:9px; bottom:0; right:0; z-index:99; border-radius:100%; box-shadow: 0px 0px 5px #ccc; margin:20px; background:white; } html{ scroll-behavior:smooth; } And this is the code I've injected in the header: <div id="scroll-here"></div> <a id="back-to-top" href="#scroll-here"> <img src="https://static1.squarespace.com/static/61f41cf600dec14c7c38f90b/t/62542758a81ed506e7f2b164/1649682264925/arrow-up-circle-52_989ac618-1138-4d30-9b85-aee2cc99139e.png"> </a>
-
Hi, I'm trying to achieve a border above and below my scrolling marquee, adding the border below works fine but when i try and add one above there is an additional line appearing which i don't want. I'm using the code as below: .Marquee * { border-bottom: 1px solid; } .Marquee * { border-top: 1px solid; } I'm not very knowledgable on CSS so any help would be appreciated so I have a single line above and a single line below the scrolling text. Thanks!
-
Site URL: https://www.usmexicofoundation.org Hi everyone! I'm stuck in how to change the color of the scrolling text! I've looked everywhere and followed directions I've found and still I can't figure out how to change the text from black to red... Any help is greatly appreciated!
-
Custom Font for new Scrolling Text Block
StephanieMace posted a question in Coding and Customization
Site URL: https://www.onlythewildones.com/ I want to change the font of my scrolling text block to match the headers! below was the code for the headers. how do i update this text to match the pink headers? screenshot attached. p1 {font-family: 'freeland'; font-size: 36px; color:#cc818d} -
Site URL: https://cello-prism-xna7.squarespace.com/ Password: TIL2022 I have noticed that you can scroll horizontally despite there being no content, it's just white space. Appreciate if anyone can help as don't know where to start looking. Thanks.
-
Site URL: https://www.kimbalbumstead.com/about Hello, I have a question regarding adding a scroll bar to a summary block. I have a section on my page which shows news items under the heading "what i'm up to at the moment" https://www.kimbalbumstead.com/about I only have 3 news items showing in the summary block, but I would like to add a scroll function within that summary block, so that it's possible to see the other news items. Does anyone know how to do that? Alternatively, is there a way of clicking through to see the other items? Many thanks Kimbal 🙂
