Code to change the Annoucement bar length

Store Design

Topic summary

Request to adjust a Shopify theme’s announcement bar so its message stays on one line instead of wrapping into three lines.

  • Goal: “Stretch” the announcement bar text across the page width so more characters fit on a single line.
  • Context: Announcement bar = top-of-page banner message area in a Shopify store theme.
  • Details provided: No theme name, CSS, screenshots, or code snippets.
  • Status: No solutions or responses yet; the issue remains open.
  • Key unknowns: Which theme is used, exact CSS causing the wrap, desired behavior across desktop vs. mobile, and any length limits or container constraints.
Summarized with AI on December 20. AI used: gpt-5.
1

I’m hoping someone can help me. Our Announcement bar spreads over 3 lines instead of stretching out over the restraints of my page. I would love to know what code to use to stretch this out so more characters are on the one line…. Thank you in advance

1 Like
2

@info_9359 can you share a link to your store?

3

www.gccomm.com.au is our website

4

@info_9359 from the Shopify Admin click on Customize in your theme and select the Announcement Bar. From there look for Custom CSS and add the following snippet

@media (min-width: 990px){
   .utility-bar__grid {
       display: flex;
       align-items: center;
   }
   
   .list-social {
      flex-shrink: 0;
   }

   .announcement-bar {
       width: 95%;
   }
}
1 Like
5

Thank you so much. Have a wonderful Christmas!

1 Like
6

Hi,

Hope this will help

To keep your announcement text on one line add the following to your theme’s base.css (or theme.css)

CSS example

.announcement-bar__message {
  white-space: nowrap;
}

.announcement-bar {
  max-width: 100% !important;
}