kellicox90 Posted June 8, 2022 Share Posted June 8, 2022 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); } } Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 I think you can try Scrolling Block, then we will give the code to move block into announcement bar. What do you think? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kellicox90 Posted June 13, 2022 Author Share Posted June 13, 2022 On 6/11/2022 at 6:27 PM, tuanphan said: I think you can try Scrolling Block, then we will give the code to move block into announcement bar. What do you think? Yep this sounds good Tuanphan. Let's do that. Do I need to create the scrolling block first? Link to comment
tuanphan Posted June 13, 2022 Share Posted June 13, 2022 4 hours ago, kellicox90 said: Yep this sounds good Tuanphan. Let's do that. Do I need to create the scrolling block first? Yes. You can add Scrolling Block in Footer. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kellicox90 Posted June 28, 2022 Author Share Posted June 28, 2022 On 6/13/2022 at 7:11 PM, tuanphan said: Yes. You can add Scrolling Block in Footer. Hi Tuan I've put the scrolling block into the footer, how do I now relocate it to the top of the header. It would be also good to set it to a sticky position if possible? Thanks Link to comment
tuanphan Posted June 30, 2022 Share Posted June 30, 2022 On 6/28/2022 at 9:00 AM, kellicox90 said: Hi Tuan I've put the scrolling block into the footer, how do I now relocate it to the top of the header. It would be also good to set it to a sticky position if possible? Thanks Add to Design > Custom CSS div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; } div.sqs-announcement-bar-custom-location { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kellicox90 Posted July 1, 2022 Author Share Posted July 1, 2022 17 hours ago, tuanphan said: Add to Design > Custom CSS div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; } div.sqs-announcement-bar-custom-location { display: none; } Hi Tuan I've tried this, it's not working, are you able to take another look? Link to comment
tuanphan Posted July 2, 2022 Share Posted July 2, 2022 On 7/1/2022 at 7:46 AM, kellicox90 said: Hi Tuan I've tried this, it's not working, are you able to take another look? Add this code under header#header { z-index: 9; top: 100px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kellicox90 Posted July 5, 2022 Author Share Posted July 5, 2022 On 7/2/2022 at 5:31 PM, tuanphan said: Add this code under header#header { z-index: 9; top: 100px; } Hi Tuan I have this div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; } header#header { z-index: 9; top: 100px; } It doesn't work.. I'm not sure why.. anymore ideas? Thanks so much Link to comment
tuanphan Posted July 6, 2022 Share Posted July 6, 2022 18 hours ago, kellicox90 said: Hi Tuan I have this div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; } header#header { z-index: 9; top: 100px; } It doesn't work.. I'm not sure why.. anymore ideas? Thanks so much Try this new code div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; } header#header { z-index: 9; top: 100px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kellicox90 Posted August 28, 2022 Author Share Posted August 28, 2022 On 7/6/2022 at 10:25 AM, tuanphan said: Try this new code div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; } header#header { z-index: 9; top: 100px; } Hi @tuanphan This was all working perfectly, until today I jumped in to change some of the scrolling text and my header was missing and I cant find the scrolling block to edit it? I changed the z index of the header which brought it back... but I dont seem to have my scrolling block at all? Please help? Link to comment
kellicox90 Posted August 28, 2022 Author Share Posted August 28, 2022 Just now, kellicox90 said: Hi @tuanphan This was all working perfectly, until today I jumped in to change some of the scrolling text and my header was missing and I cant find the scrolling block to edit it? I changed the z index of the header which brought it back... but I dont seem to have my scrolling block at all? Please help? Ps. the site is now live, just andrewwilsonco.com Link to comment
tuanphan Posted August 31, 2022 Share Posted August 31, 2022 On 8/29/2022 at 3:03 AM, kellicox90 said: Hi @tuanphan This was all working perfectly, until today I jumped in to change some of the scrolling text and my header was missing and I cant find the scrolling block to edit it? I changed the z index of the header which brought it back... but I dont seem to have my scrolling block at all? Please help? You can edit above code to this. It will disable on Editing Mode. body:not(.sqs-edit-mode) div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; } body:not(.sqs-edit-mode) header#header { z-index: 9; top: 100px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kellicox90 Posted August 31, 2022 Author Share Posted August 31, 2022 13 hours ago, tuanphan said: You can edit above code to this. It will disable on Editing Mode. body:not(.sqs-edit-mode) div#block-yui_3_17_2_1_1656042100377_73803 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; } body:not(.sqs-edit-mode) header#header { z-index: 9; top: 100px; } Hi @tuanphan Thank you, but this code gets rid of the header altogether and there's still no sign of the scroll bar... anymore ideas? The first time, it worked perfectly so I don't really understand how it all of a sudden is missing completely? Link to comment
tuanphan Posted September 3, 2022 Share Posted September 3, 2022 On 9/1/2022 at 3:35 AM, kellicox90 said: Hi @tuanphan Thank you, but this code gets rid of the header altogether and there's still no sign of the scroll bar... anymore ideas? The first time, it worked perfectly so I don't really understand how it all of a sudden is missing completely? Missing an ID, try this new code body:not(.sqs-edit-mode) div#block-yui_3_17_2_1_1661916239919_2890 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; } body:not(.sqs-edit-mode) header#header { z-index: 99999; top: 100px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kellicox90 Posted September 4, 2022 Author Share Posted September 4, 2022 On 9/3/2022 at 7:28 PM, tuanphan said: Missing an ID, try this new code body:not(.sqs-edit-mode) div#block-yui_3_17_2_1_1661916239919_2890 { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; } body:not(.sqs-edit-mode) header#header { z-index: 99999; top: 100px; } All fixed, thank you so much Link to comment
studiolinear Posted August 3 Share Posted August 3 Hi @tuanphan! I am trying to create this same exact element on my site with no luck. I tried following the steps here and update the block ID but it didn't work. Would you be able to assist? https://cat-eagle-5nlz.squarespace.com/ Thank you as always! Link to comment
tuanphan Posted August 4 Share Posted August 4 On 8/3/2023 at 8:37 AM, studiolinear said: Hi @tuanphan! I am trying to create this same exact element on my site with no luck. I tried following the steps here and update the block ID but it didn't work. Would you be able to assist? https://cat-eagle-5nlz.squarespace.com/ Thank you as always! Hi, The site is private. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
studiolinear Posted August 4 Share Posted August 4 5 hours ago, tuanphan said: Hi, The site is private. Sorry about that, pw is: florette Link to comment
studiolinear Posted August 4 Share Posted August 4 @tuanphanI did remove the code that I had pasted in from the code above here because it was hiding the header so currently, there is no code added to place the scrolling footer element into the announcement bar. Thanks! Link to comment
tuanphan Posted August 6 Share Posted August 6 On 8/4/2023 at 10:38 PM, studiolinear said: @tuanphanI did remove the code that I had pasted in from the code above here because it was hiding the header so currently, there is no code added to place the scrolling footer element into the announcement bar. Thanks! Use this code body:not(.sqs-edit-mode) footer.sections section:last-child { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; min-height: unset !important; } body:not(.sqs-edit-mode) footer.sections section:last-child .content-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; } body:not(.sqs-edit-mode) header#header { z-index: 99999; top: 30px; } footer.sections { z-index: 999999 !important; } studiolinear 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
studiolinear Posted August 8 Share Posted August 8 (edited) On 8/6/2023 at 9:52 AM, tuanphan said: Use this code body:not(.sqs-edit-mode) footer.sections section:last-child { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999999; height: auto !important; min-height: unset !important; } body:not(.sqs-edit-mode) footer.sections section:last-child .content-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; } body:not(.sqs-edit-mode) header#header { z-index: 99999; top: 30px; } footer.sections { z-index: 999999 !important; } Thank you so much! It is working and we love it! Edited August 8 by studiolinear tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment