Help with announcement bar (Dawn theme)

[user12357]

Hey everyone, I’m using the Dawn theme and added 3 announcements in the announcement bar.

What I want is for all 3 announcements to show side by side and stay fixed on desktop.
On mobile, I want them to rotate like normal, one at a time.

I’ve attached a screenshot to show exactly how I want it to look on desktop.
If anyone knows how to do this with code or CSS, I’d really appreciate the help.

Thanks a lot!

[EBOOST]

Hi @user12357 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → customize

2. In the Header section → click Announcement bar → Settings
3. Expand Custom CSS section

4. Add code below

@media(min-width: 750px){
	.announcement-bar-slider .slider-button {
		display: none;
	}

	.announcement-bar-slider .slider > div {
		flex: 0 0 33.33333%;
	}
}

5. Save

[user12357]

Hi, thanks for the code but it didn’t work

[EBOOST]

Could you share your store URL? I will to take a look it.

[user12357]

@EBOOST

https://decorapy.co.uk/

[EBOOST]

Hi,

Does it seem you haven’t added code yet?

I have just tried to added code to your store. Result below:

[user12357]

Thank you, the code worked for desktop but I want the announcements to rotate on mobile without the arrows (< >)while keeping the desktop version as is. Is that possible?

[EBOOST]

Hi,

You can update code above to code below:

.announcement-bar-slider .slider-button {
  display: none;
}
@media (min-width: 750px) {
  .announcement-bar-slider .slider > div {
    flex: 0 0 33.33333%;
  }
}

After that turn on the rotate featured in the settings

[user12357]

Thanks mate, it worked perfectly!