Custom Liquid Overlapping menu drawer

[JosueOtavalo]

 

I am using Shrine Pro v1.0.4 and wanted to add a sticky announcement bar above the header, which is also sticky. However, when I used the default announcement bar, there was an unpleasant gap between it and the header. To fix this, I used a custom Liquid section as an announcement bar.

I adjusted the z-index and found that setting it to 7 works well without interfering with the cart drawer on mobile.

However, on mobile, when I open the menu drawer, the announcement bar

overlaps it. I’ve tried different solutions but haven’t found a way to fix this.

Additionally, when I scroll down and open the menu drawer on mobile, the drawer appears dark for some reason.

I'm not sure if this is related, but any help would be appreciated!

[Weblorium]

can you share the website?

[JosueOtavalo]

it is called diffu.ca (its open) do you need access to it like to see the code

[JosueOtavalo]

Thanks for you reply!

Well I think you solved the issue of the dark page, however now the menu drawer is only a white screen (Btw my Website is called diffu.ca). After some testing I think the header and menu drawer are one group, and it would be impossible for me to make the custom liquid (announcement bar) go over the header, and below the menu drawer. Here is how I got my announcement bar made. I copied this off a shopify discussion board and pasted it at the bottom of my theme.liquid.

my header would overlap with this custom liquid so I just moved my header down with

So technically the custom liquid is just on top of the header, and once the header has a higher z-index then the custom liquid, the custom liquid disappears under it.

maybe there is a better way to do it, thanks for your help

[Roland12]

You can fix this by adjusting the z-index and ensuring proper stacking order. Try these CSS changes:

1️⃣ Fix the announcement bar overlapping the menu drawer:
Add this to your theme’s CSS file

css

CopyEdit

.announcement-bar { z-index: 5 !

important; } .menu-drawer { z-index: 10 !important; }

2️⃣ Fix the dark overlay issue when scrolling:
It might be a background issue. Try adding:

css

menu-drawer { background-color important Adjust color as needed

If the issue persists, check for position: fixed; on the drawer and adjust accordingly. Let me know if you need further assistance

[JosueOtavalo]

Thanks for the reply,

Well the Menu Drawer is not on top of the announcement bar (Its actually just a custom liquid I made). However now when I scroll down my header goes on top of my announcement bar which makes it disappear. My header is transparent in the landing page and when you scroll down becomes white. Maybe you can visit my website diffu.ca to see it. if you need more information feel free to ask me.