The first issue seems to be caused by the following - since your nav container is centered relative to the viewport and the logo is fixed using a margin, then when a screen gets to be certain size it will overlap…
so a solution would be to put the logo and the nav in a parent div that is positioned how you like, but inside the parent div, the logo and the nav are positioned responsively so they will not overlap but shrink when needed… - using VH/VW or %'s
oh and it looks fin in the webflow editor because it is always has your viewport hight more then it is on your mobile to recreate the behaviour open your website in chrome responive designer and make the viewport shorter…