Why does my supply theme menu cover half the page on iPhone?

Technical Q&A
1

006E4B70-9DE8-4A56-98E3-29B3AB13111F.jpeg
006E4B70-9DE8-4A56-98E3-29B3AB13111F.jpeg739×1600 82.8 KB

Hi there, I am using a supply theme, but when I browse the website through my iPhone, the menu covers half of the page, even if I moved the cursor up and down. Although this does not appear in all devices, but in some of them only!

here is the website: https://officialang.com

2

Hi @Fatma1 ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.nav-bar{
	opacity: 0;
}
.show-nav .nav-bar{
	opacity: 1;
}

Hope it helps!

3

thanks a lot for your reply

now the menu is hidden, but when I click on anything it clicks on the hidden menu, not the products.

I mean although it’s invisible, it’s still there and covers the page. I hope that’s clear

4

@LitExtension

thanks a lot for your reply

now the menu is hidden, but when I click on anything it clicks on the hidden menu, not the products.

I mean although it’s invisible, it’s still there and covers the page. I hope that’s clear

5

Hi @Fatma1 ,

Please change code:

.nav-bar{
	display: none;
}
.show-nav .nav-bar{
	display: block;
}

Or

.nav-bar{
	opacity: 0;
	z-index: 0 !important;
}
.show-nav .nav-bar{
	opacity: 1;
	z-index: 2000 !important;
}

Hope it helps!