Greetings fellow developers! This is my first time reaching out for assistance.
I have encountered an odd issue with my website while viewing it on an iPhone 5s. The problem lies with a mobile side-menu that is absolutely positioned with a z-index of 1000. When the user clicks on the hamburger menu icon, the menu should slide in from the left of the screen. While this functionality works flawlessly on desktop, iPad, and Huawei mobile devices, when I try to view it on my iPhone 5s, it appears like this: Home page Section pageCorrect version
It seems as though the menu covers the header but fails to overlay the main section. Here's how the element is currently styled:
position: absolute;
top: 0;
left: 0;
background-color: white;
opacity: 1;
width: 0;
min-height: 100vh;
height: 100%;
z-index: 1000;
transition: 300ms;
display: flex;
flex-direction: column;
If you'd like to take a look at the GitHub repository for my website, here is the link: https://github.com/djlens/Maciek-Martyka-website/tree/master/website
Thank you in advance for any assistance you can provide!