How can i move the text in the annoucement bar to the left ?

[Martin299]

How can i move the text in the annoucement bar to the left ?
thanks in advance

[BSSCommerce-HDL · Accepted solution]

Hi @Martin299, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.announcement-bar {
    justify-content: start !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

Hi @Martin299,
Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css
Step 3. Add this code to the end of file

.announcement-bar {
  justify-content: start!important;
}

If it helps you, please like and mark it as the solution.

Best Regards

[BSSCommerce-B2B · Accepted solution]

Change the code like this

<style>
@media only screen and (max-width: 600px) {
  .announcement-bar {
    display: none;
  }
}
@media only screen and (min-width: 601px) {
  .announcement-bar {
    justify-content: start!important;
  }
}
</style>

[BSSCommerce-HDL · Accepted solution]

Hi @Martin299, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.announcement-bar {
    justify-content: start !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Martin299]

thank you for you help
how can i show it only in desktop not on mobile ?

[BSSCommerce-B2B · Accepted solution]

Change the code like this

<style>
@media only screen and (max-width: 600px) {
  .announcement-bar {
    display: none;
  }
}
@media only screen and (min-width: 601px) {
  .announcement-bar {
    justify-content: start!important;
  }
}
</style>

[BSSCommerce-HDL · Accepted solution]

Hi @Martin299, Please replace with this new code: 

<style>
@media only screen and (max-width: 768px) {
  .announcement-bar {
    justify-content: start !important;
  }
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

Hi @Martin299,
Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css
Step 3. Add this code to the end of file

.announcement-bar {
  justify-content: start!important;
}

If it helps you, please like and mark it as the solution.

Best Regards