Fixed Announcement Bar on Dawn Theme

Store Design
, ,

Topic summary

A user implemented a fixed announcement bar on the Dawn theme but encountered a positioning issue where the bar appears too far left on larger desktop screens, while displaying correctly on smaller screens.

Proposed Solution:

  • Add CSS to make the announcement bar full-width:
    • .announcement-bar-section { width: 100%; }
  • Optionally add bottom padding to prevent the fixed bar from covering page content:
    • body { padding-bottom: 2rem; }

The issue appears to be related to width constraints on the announcement bar section at larger viewport sizes.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I’ve created a fixed announcement bar on Dawn Theme but it’s appearing too far to the left? It’s fine on smaller desktop screens.

Screenshot 2025-09-04 at 1.54.00 pm
Screenshot 2025-09-04 at 1.54.00 pm1920×962 75.9 KB

1 Like
2

You’d need this to make it full-bleed.

.announcement-bar-section {
  width: 100%;
}

May also add this as well to avoid covering something at the bottom of the page…

body {
  padding-bottom: 2rem;
}
1 Like