Scrolling Marquee Announcement Bar on Envy theme...

Store Design
1

Hi All,

How can I make my text in Envy theme Announcement Bar – a scrolling marquee? Adding the standard HTML tags doesn’t work, have also looked through past questions and Google and none of them seem to work…

https://www.reformedcharacters.com/

Thanks,

2

@danielhinde Add following CSS at the bottom of your Theme’s CSS file.

#shopify-section-announcement-bar {
    z-index: 999999;
    position: fixed;
    width: 100%;
}

But you should consider the appearance in the mobile view.

The text might be a little to big.

I hope this helps

3

Hi @Finer doesn’t seem to be working…

4

@danielhinde
Because you announcement bar can’t accept html tag.
So you have to make it by custom.

Thank you.

5

@danielhinde Sorry that was a misunderstanding from my side. @Zworthkey is right - you’ll have to customize the bar by modifying the code from the Code-Editor. Eventually, you can also find a third-party app to get this working.

1 Like
6

Try this code. Paste in theme.css

.announcement-bar {
height: 30px;
overflow: hidden;
position: relative;
}
.announcement-bar p{

position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
/* Starting position /
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/ Apply animation to this element /
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}
/ Move it (define the animation) /
[email removed] example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
[email removed] example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); / Firefox bug fix /
-webkit-transform: translateX(100%); / Firefox bug fix /
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); / Firefox bug fix /
-webkit-transform: translateX(-100%); / Firefox bug fix */
transform: translateX(-100%);
}
}

.announcement-bar__message {
padding: 5px 0 !important;
font-size: 12px !important;