Issue with Navbar (and other things) in mobile mode

Dear community,

I was very proud of myself for creating what I thought was a cool first website with Webflow. Then I published it and tried to view it on my mobile and it was a disaster. Many things were going wrong. So i’ve copied the code into a new file and things are working a bit better, but there are still bugs. I thought i’d try posting here to see if someone could help me, theres a chance however I might just start trying to code the site outside of Webflow. Here is the published site link:

here’s the link to the code:

https://preview.webflow.com/preview/team-0d37d7?utm_medium=preview_link&utm_source=designer&utm_content=team-0d37d7&preview=2905e9310a5d12c1d53f5fda2dc57dea&workflow=preview

Please open it in your browser and then with your phone and notice the following issues:

a) why is the navbar in vertical mobile mode grey, when it is transparent in all other views? I can’t get it to be transparent so that the hero picture is seen from behind, like for the other breakpoints.

b) when I turn my phone horizontally, the website does not match any of the 4 layouts (desktop, tablet, mobile etc). What is going on here?

There were also other issues, but I think that’s good for now.

Thank you in advance for the help.