Announcement bar sticky

Technical Q&A

Topic summary

Goal: Make the Shopify Dawn theme’s announcement bar sticky without overlapping the header/logo.

Proposed solution (CSS):

  • Announcement bar: position: fixed; width: 100%; left: 0; top: 0;
  • Header: padding-top: 35px; to offset the fixed bar.
  • Where to add: Theme Editor → three dots → Edit Code → Assets → base.css.

Mobile issue: One user saw the sticky bar overlap the header on iPhone (image provided). After revisiting changes, they confirmed it worked (no specific fix detailed). A shop link was shared for troubleshooting.

Alternative CSS provided for Dawn:

  • .utility-bar__content { position: fixed; top: 50px; width: 100%; background: #fff; }
  • .announcement-bar { color: #000 000; background: #f5f3ed; position: fixed; top: 0; width: 100%; }
  • .site-header-sticky .site-header { position: sticky; top: 100px !important; }

Status/outcomes:

  • Some users achieved success after editing base.css and adjusting offsets to prevent overlap, including on mobile.
  • Others still report issues (announcement bar disappearing or not sticky) and difficulty locating/editing the correct files.
  • Discussion remains partially unresolved; further code review per-site is needed.
Summarized with AI on January 6. AI used: gpt-5.
11

For the announcement bar add

.utility-bar__content{
position: fixed;
top: 50px;
width: 100%;
background: #fff;
}

.announcement-bar{
color: #000000;
background: #f5f3ed;
position: fixed;
top: 0px;
width: 100%;
}

.site-header-sticky .site-header {
position: sticky;
top: 100px !important;
}