Change announcement bar width Dawn theme 13.0

Shopify Discussion

Topic summary

A user running Dawn theme version 13.0.1 wants to modify the announcement bar slider width to display text in a single line on desktop.

Current Issue:

  • The announcement bar uses a grid column divided into 3 parts
  • Text currently wraps across multiple lines
  • User wants to expand the center section to accommodate full text on one line

Proposed Solution:

  • Another user suggested adding CSS code to base.css: .utility-bar__grid { min-width: 100%; }

Status:

  • The CSS solution was implemented but did not resolve the issue
  • The announcement bar appearance remains unchanged
  • The problem is still unresolved and awaiting further troubleshooting
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am on Dawn 13.0.1 and want to change the announcement bar slider width. I understand it is a Grid column divided in 3 parts. I want to increase the centre so that text comes in 1 line for the desktop.

Current:

aaskretail_0-1709207471004.png
aaskretail_0-1709207471004.png1814×283 42.1 KB

aaskretail_1-1709207752319.png
aaskretail_1-1709207752319.png580×208 7.42 KB

Need the announcement bar to look like this in single line when changed computed from 382 to 450:

aaskretail_2-1709207824200.png
aaskretail_2-1709207824200.png1841×605 190 KB

URL: www.irsyaofficial.com

Thanks !

2

@aaskretail Please add below css

.utility-bar__grid {
   min-width: 100%;
}
3

Hi,

Thanks. I added the code in base.css, It still looks the same.

aaskretail_0-1709213821707.png
aaskretail_0-1709213821707.png1838×301 185 KB

I want it to look like:

aaskretail_1-1709213899319.png
aaskretail_1-1709213899319.png1918×278 64.2 KB