Announcement bar text moving

[lucylucy9608]

Hi everyone,

I’m using the Fabric theme for my website. I have an announcement bar added to my header. But the text moves to the left on all of my pages.
Whenever I click on the page, the text moves.

1. Correct placement of the text

2. Incorrect placement of the text

you can see that the text moved to the left.

This error happens on all the pages that I have in the footer

This is the link to website: https://glowbe.store/

Could you please let me know if this is solvable or if this is theme specific bug? Many thanks!

Lucy

[NKCreativeSoulutions]

G’day @lucylucy9608,

You can add this in the CSS part of your page:

.announcement-bar__slides {
  text-align:center !important;
}

Or you could search the css file for that class heading and add the line there. I’m not sure what is pushing the text to the side on the other pages, that would have to be looked at in the code.

Let me know how you go!

Nathan

[Moeed]

Hey @lucylucy9608

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
p.announcement-bar__text {
    text-align: -webkit-center !important;
}
</style>

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[Maximus3]

Looks like you have multiple apps installed. Essential announcement bar is installed but not configured. I would fix whatever conflict is going on, but you can put a global css rule to try to override whatever is going on. You can put this at the bottom of base.css

.announcement-bar__slide {
text-align: var(--text-align, center) !important; }
.announcement-bar__text {
text-align: center !important;
display: inline-block;
width: 100%; }

or in theme.liquid just before the </body> like this

<style>
.announcement-bar__slide {
text-align: var(--text-align, center) !important; }
.announcement-bar__text {
text-align: center !important;
display: inline-block;
width: 100%; }
</style>

[Ploqo]

Problem

The fix

• Online Store editor: click the Announcement bar section
• Scroll its settings to Custom CSS and open it
• Paste this:

.announcement-bar__text { text-align: center; }

• Save

That centers the text on every slide, so it stays put no matter which message is showing.

Regards,
Ajay

[Priyasha]

Hi @lucylucy9608,

This happens because the announcement bar text is centered by default, but once the slide changes (on click or auto-rotate), the theme re-applies alignment styles that push it to the left instead.

Easiest fix, no coding required:

1. Go to Online Store > Themes > Customize.
2. Click on the Announcement bar section.
3. Scroll down to the Custom CSS box (most Fabric theme sections have one).
4. Paste this in:

.announcement-bar__text {
  text-align: center !important;
}

5. Save.

This forces the text to stay centered no matter which slide is showing. If your theme’s Custom CSS field doesn’t apply this class, you can also try:

.announcement-bar__slides {
  text-align: center !important;
}

Give the page a hard refresh (Ctrl/Cmd + Shift + R) after saving so the CSS isn’t cached. That should stop the shifting for good.

[devcoders]

Hi @lucylucy9608

I checked it, but it’s still appearing in the center, and the footer menu is also working properly. Could you please tell me exactly where you’re seeing the issue?

Best regards,
Devcoder

[Bhumii]

Hello,

I checked, and it seems to happen sometimes.

Please try adding the following CSS to fix it:

p.announcement-bar__text {
  text-align: center;
}

To add this CSS:

1. Log in to your Shopify store.

2. Go to Online Store → Themes → Edit code.

3. Open the base.css file.

4. Add the CSS at the bottom of the file.

Please let me know if this fixes the issue.

Thanks!

[lucylucy9608]

Hi @VikashJ,

I have checked for other apps and the only one I have installed is Attrac that also offers announcement bars. But I do need this app for other campaigns. However I used Ploqo’s solution and it worked. Thank you very much!!

[lucylucy9608]

Hi @Polluxdev , thank you very much it worked!