Scrolling Text Announcement Bar

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);
  }
}

I think you can try Scrolling Block, then we will give the code to move block into announcement bar. What do you think?

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?

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.

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

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;
}

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?

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;
}

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 

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;
}

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?

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

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;
}

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?

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;
}

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

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! 

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.

5 hours ago, tuanphan said:

Hi,

The site is private.

Sorry about that, pw is: florette

@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! 

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;
}

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!