Navbar disappears under content only in mobile browsers

So I've been developing my site for a while now. I've just deployed it on production and noticed that my navbar is disappearing under the page content while scrolling down.

The funny thing is that it does not disappear in mobile view of firefox/chrome. It only happens in mobile browsers (iPhone, chrome/safari/firefox). It works perfectly fine in mobile view inside of firefox/chrome/safari.

I'm even willing to donate to somebody for fixing this. Send me a message or contact me at dondor@protonmail.com

Live site: https://upcodia.cz

The navbar CSS:

.header-area .main-header-area.sticky {
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
z-index: 9999 !important;
transform: translateY(70px);
transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.96);
background: #2C2C2C;
padding-bottom: 0;

}

The content it disappears under does not have a fixed position, nor does it have a z-index set. I really have no idea. I can't even reproduce the bug locally on my machine, as it only appears in mobile browsers.

The mobile view in chrome:

https://i.imgur.com/WeEm0kO.png

The view in chrome on iPhone 8:

https://i.imgur.com/7qhZkdU.jpg

Can somebody help me or point me in the right direction please ? Thank you!