Sticky Custom Liquid (announcement bar) Not working on mobile

[JosueOtavalo]

Website name: Diffu.ca 

Hello Again, I wanted to fix this urgent issue, so I posted again but with more information. I am using Shrine Pro v1.0.4 and wanted to add a sticky announcement bar (this is actually a custom liquid I made, so it is not actually a announcement bar, but a custom liquid coded as one)  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. The issue popped up that the custom liquid would overlap with the cart drawer, so 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 custom liquid with  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. 

Here is how I got my announcement bar/Custom Liquid made. I copied this off a shopify discussion board and pasted the code at the bottom of my theme.liquid.

My header would overlap with the custom liquid/announcement bar so i moved my header down with padding top.

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.

If any of you need access to my code please feel free to ask, my header has some code has start as transparent, then white when scrolled down with the header text and icons turning black. you can check my website to see. 

any help would be appreciated!

[Dan-From-Ryviu]

Hi @JosueOtavalo 

You can add this code to solve the issue with your menu

.section-header.shopify-section-group-header-group { z-index: 9999 !important; }

[JosueOtavalo]

Yes but now the announcement bar disappears when you scroll down. My header is transparent but becomes filled when scrolled down. And since initially both the announcement bar and header were in the same position when fixed. I moved the header doing using padding. 

[Dan-From-Ryviu]

Please update the code 

html .section-header.shopify-section-group-header-group { 
    z-index: 9999 !important; 
    top: 47px; 
}

And remove this code that you added

.header {
    padding-top: 55px !important;
    z-index: 4 !important;
    margin-top: 0px !important;
}

[JosueOtavalo]

Thanks for the reply, however for some reason the header moves depending if its on mobile or on desktop, this causes a gap to be seen on mobile. 

[EBOOST · Accepted solution]

Hi @JosueOtavalo ,

Maybe I suggest I add code below to Assets/base.css:

.scrolled-past-header .header-wrapper #menu-drawer * {
	color: rgba(var(--color-foreground),1)!important;
}

@media(max-width: 749px){
	
	body.overflow-hidden-tablet .section-header.shopify-section-group-header-group {
		z-index: 10;
	} 
}

[JosueOtavalo]

Wow thanks this solved it!