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

Shopify Discussion

Topic summary

Issue: Center the announcement bar text vertically and remove a transparent gap that appears between the bar’s top edge and the page during mobile (iOS) scrolling.

Context:

  • A screenshot illustrating the gap was attached.
  • Store link was provided: https://www.elysiumreads.com/
  • “Announcement bar” refers to the top notification banner in a Shopify theme.

Proposed steps:

  • A helper advised editing theme.liquid and inserting code above the tag. However, the provided code block contained no actual code.

Latest update:

  • The text alignment appears fixed (“Line-up is okay”), but the scrolling gap persists.
  • The requester asked for specific code to address the gap.

Outcome:

  • No concrete solution or working code has been shared.
  • Discussion remains open; key request is a functional CSS/JS fix for the iOS scroll-induced gap.

Notes:

  • The attached image is central to understanding the visual issue.
  • The gap occurs intermittently on iOS while scrolling.
Summarized with AI on December 21. AI used: gpt-5.
1

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!

0-02-05-fcc711ed69dddf06637c00fa8d3dcfe51b3c4530c70584c4ccc2e58b769aaeaa_a1f194223acd87da.jpg
0-02-05-fcc711ed69dddf06637c00fa8d3dcfe51b3c4530c70584c4ccc2e58b769aaeaa_a1f194223acd87da.jpg750Ă—477 32.3 KB

1 Like
2

https://www.elysiumreads.com/

3

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 tag:

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 :heart_eyes:

1 Like
4

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.

1 Like
5

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 tag:

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 :heart_eyes:

1 Like