How can I fix overlapping sticky bar on iPhone?

Shopify Discussion
1

I would like to make my bar sticky. When I add the custom code like this, everything looks good on web version.

position: fixed;

width: 100%;

left: 0;

top: 0;

But, when I open my website on my iphone, the sticky bar overlaps the header. Please suggest how to fix this.

IMG_9215.PNG
IMG_9215.PNG1125×2436 231 KB

2

Hi @olinka012 ,

Please follow the below steps to put the below CSS.

  1. Online store → Themes → edit code
  2. search for base.css or theme.css and paste below CSS
#shopify-section-announcement-bar {position: sticky; z-index: 4; top: 0;}

It’s for DAWN theme if it’s not working then please share the URL or share the theme name

3

the theme is Craft. Im not sure where exactly I should put this code in base.css file, please advice

4

the theme is Craft. I tried, it did not change anything, the bar is not sticky…

5

shaperini.com

6

just removed the password

7

I did not get that sticky bar to show good on mobile…