Is there any simple way to turn the dawn theme native announcement bar into an infinite scroller like a marquee?
Hi @xnyjyh There is no easy way to accomplish it, the only way to do it is from custom coding, If need I can provide you the base code but you have to edit it according to your theme and needs.
If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Best Regards
Sahil
I fixed my original mock marquee code, but its doing something weird on mobile and always has. Maybe you can help?
The gap is .75rem, and works fine on desktop, but on Mobile its starts off at .75 then each word that goes by the words start to spread more and more apart. ANy suggestions? this is the code below…
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
PROUDLY INDIGENOUS OWNED
BUY NOW PAY LATER
Oh and this is the image on mobile so spread apart the words… you can see them spreading more apart.
Hi @xnyjyh Thanks for the code, if your code is working fine in desktop then you just need to add the css according to mobile device.
@media screen and (min-width: 600px) {
body { // Your code specific to mobile will be here
background-color: lightgreen; // Your code specific to mobile will be here
}
}
The above is the base code, like you have mentioned that .75 rem is not working in mobile then in place of body just add “.scroller__inner” and inside it you can add the code that will fix your mobile issue.
If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Best Regards
Sahil
1 Like
Its fine, I can do it. Totally makes sense duhhh to me lol.
One more thing maybe you can help with.
the scroller is in a custom liquid section in editor. Same with predictive search as you seen in the images I sent earlier.
Id like the scroller to show on all pages under the header on mobile and desktop. Dont worry about the search, that only show on the home as I want it like that. I don’t want to put the scroller custom liquid in the header section as it about the search on home screen, so its in the body. ANyhow, how can get the scroller to show on all pages under the main headers(mobile/desktop)?
Thank you.
the code did not fix issue. STarts off finet then spread apart again. I used this: Even using !important; does nothign
@media screen and (max-width: 749px) {
.scroller__inner {
gap: 0.75rem;
}
}