How to set text in the middle of this bar?

Shopify Discussion

Topic summary

A user seeks help centering text within an announcement bar on their Shopify store, providing a screenshot showing the current alignment issue.

Responses provided:

  • One responder claims the text already appears centered based on their inspection
  • Two CSS solutions are offered:
    1. Adding top: 2px; to .announcement-bar__message via Theme Customize > Custom CSS
    2. Using flexbox properties (display: flex; justify-content: center; align-items: center;) on .page-width.utility-bar__grid .announcement-bar in the theme’s CSS file

Both CSS solutions include before/after screenshots demonstrating the centered result. The discussion remains open with no confirmation from the original poster about which solution worked or if the issue is resolved.

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

How can I set the text in the middle of the bar?

Bildschirmfoto 2025-01-13 um 08.20.43.png
Bildschirmfoto 2025-01-13 um 08.20.43.png2860×1480 393 KB

2

Hello @NikosBat

As i can check your text is in the middle of the bar.

136.png
136.png1903×134 15.2 KB

Thanks

3

Hi @NikosBat

You can try this code and follow instruction below:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

.announcement-bar__message {
    top: 2px;
}

Result:

EstherBui_0-1736755819576.png
EstherBui_0-1736755819576.png680×478 176 KB

I hope it helps.

Esther

4

Hi @NikosBat Now it will stay in the center.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.page-width.utility-bar__grid .announcement-bar {
    display: flex;
    justify-content: center;
    align-items: center;
}

Result:

websensepro_0-1736756628201.png
websensepro_0-1736756628201.png1358×569 459 KB

websensepro_1-1736756647265.png
websensepro_1-1736756647265.png346×497 73.6 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!