New Shopify Certification now available: Liquid Storefronts for Theme Developers

Flex Theme - How do I center text in the 'Top bar'

N-B
Tourist
6 0 1

Hi,

 

I want to center the text 'Free Standard Shipping...' in the Top bar in my Flex theme (Swagger). How can I do this? HTML does not work.

 

Screenshot 2023-06-10 at 14.29.38.png

 

Thank you

Replies 7 (7)
Made4uo-Ribe
Shopify Partner
4229 978 1190

Hi @N-B ,

Would you mind to share your URL website (with password if its protected)?

Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Zqdo
Shopify Partner
803 32 62

Can you share the link to your website please? This would make it a little bit easier for me to see what the problem is and guide you in the right direction. 

banned
N-B
Tourist
6 0 1

Unfortunately, our old website is live at the moment. This problem is part of our new website which hasn't been uploaded yet. 

Zqdo
Shopify Partner
803 32 62

If you don't want to share the link and password publicly, feel free to send it to me via my details below in my signature.

banned
N-B
Tourist
6 0 1

I don't think that will work since the new theme has not been published on our website yet.

Made4uo-Ribe
Shopify Partner
4229 978 1190

The preview will work also.. 😊 cause its hard to determind the selector name and different theme. Or if you know a bit of coding you can just add this but change selector that work. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "theme.css, styles.css or base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.announcement-bar__message {
   text-align: center;
}

I hope it help. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


RadiantFaith
Visitor
1 0 0

Hi there,  I tried this and it didn't work.  The theme as the announcement bar, and also the "top bar", I am trying to achieve the same thing which is to move the text to the middle in the "top bar", not the "announcement bar'.  

Please advise.