Announcement bar text center + eliminate transparent space between top of the bar and the page.

[starscream911]

Hello experts! 

Can we find a solution for the following issue in my store:

I want to center the text in my announcement bar between the top and the bottom,

and also i want to eliminate transparency between the top edge of the bar and the page - from time to time there is a gap which you can see when I scroll in mobile version (IOS device), screenshot attached bellow,

Any help will be appreciated! 

[BSSCommerce-HDL · Accepted solution]

Hi @starscream911, 

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>
@media only screen and (max-width: 767px) {
   .announcement-bar__message {
      line-height: 2;
   }
}
</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  😍

[goldi1]

Hello @starscream911 

can you share the store url ??

so i can fix it 

thanxx 

[starscream911]

https://www.elysiumreads.com/

[goldi1]

Okay so the solution would be

apply this code in theme>> Edit Code >> base.css at the bottom of the file . It would fixed

<style>
@media only screen and (max-width: 767px) {
   .announcement-bar__message {
      line-height: 1.8;   }
.announcement-bar-section {
     top: -1px !important;
}
}
</style>

[BSSCommerce-HDL · Accepted solution]

Hi @starscream911, 

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>
@media only screen and (max-width: 767px) {
   .announcement-bar__message {
      line-height: 2;
   }
}
</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  😍

[starscream911]

Hello! 

Line-up is okay but it still has a gap between the top of the bar and the page while scrolling.

Suggest me a code for this gap.

[BSSCommerce-HDL · Accepted solution]

Hi @starscream911, 

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>
@media only screen and (max-width: 767px) {
 .shopify-section.shopify-section-group-header-group.announcement-bar-section {
    transform: translateY(-1px);
    padding-top: 1px; 
  }
}
</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 😍