How To Make The Marquee Announcement Bar Scroll Throughout The Whole Page For Mobile & PC (Dawn)

Topic summary

A user seeks help making the Dawn theme’s announcement bar scroll continuously across the entire page on both mobile and desktop, creating a marquee effect that appears to run off-screen.

Solution Provided:

  • Add CSS code to the theme’s base.css file
  • Key CSS rules include:
    • .announcement-bar { overflow: hidden !important; }
    • .marquee { overflow: visible !important; }

Follow-up Issue Resolved:
The user encountered inconsistent spacing between words on mobile vs. desktop. This was fixed by adding:

  • .marquee__content ul { padding-left: 0 !important; }

Status: Both the scrolling effect and spacing issues were successfully resolved. The helper offered continued support for any additional problems.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.

Thanks in advance!

I am looking to make the marquee announcement bar scroll from one side of the page to the other (basically looking like it’s running off the page) that works with mobile and pc version. Example shown below.

Example:

https://decemberschild.com/

password: dc

Hi,

The following code will do what you want. If you encounter any issues again, feel free to write, I’ll help.

  1. Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar.
.marquee {
    overflow: visible!important;
}
.announcement-bar {
    overflow: hidden!important;
}

Terence

Thanks a lot! :slightly_smiling_face: I also have another couple questions if you don’t mind. How do I change the space between the words to all be exactly the same. Example shown below of the problem I’m having with both mobile and pc.

You are welcome :wink:

If I understood correctly, what you’re saying can be done with the code below! It seems like you’re starting new e-commerce ventures. There seem to be quite a few things that need to change.

ul.marquee__content {
padding-left: 0 !important;
}

That worked too! thank you for all the help :slightly_smiling_face:

Let me know if you encounter any other issues. :wink:

I will, thank you :wink: