How can I fix my announcement bar blocking the menu on mobile?

Store Design
, , , ,
1

I moved the announcement bar to appear under the header on my website: safekeychains.com

but the issue i am having is on a mobile device, the menu is covered by the announcement bar and blocking the text? please take a look at the pic i attached to see.. how can i fix this so it stays behind the menu?

IMG_3881.PNG
IMG_3881.PNG1290×2796 235 KB

2

Hi @shopsk100

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1673750661446.png
PageFlyVictor_0-1673750661446.png400×225 38.4 KB

PageFlyVictor_1-1673750661659.png
PageFlyVictor_1-1673750661659.png403×863 24.8 KB

Hope this answer helps.

Best regards,

Victor | PageFly

3

Hi @shopsk100 ,

Glad to support you today.

To can fix that issue, you can check out my suggestion below to fix it:

  1. Go to Edit code on Online Store:

GemPages_0-1673750937058.png
GemPages_0-1673750937058.png400×162 25.3 KB

  1. add my code above the tag on Theme.liquid:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

4

this didnt work :disappointed_face:

5

oh wait!! it worked!! thank u so much! would u also know how to make the announcement bar blink like a news headline?

6

you can contact the theme to solve this problem or try using my code below.