On desktop it looks fine. However, when I zoom in, or go to the mobile version, my menu bar height increases, going on top of my banner image, which stays in a fixed size
Use the an image with no text as a background image instead of using img tag. See my CodePen [dot] io [/] marklchaves (collections > responsive backgrounds).
Use HTML to create test overlays.
Create a separate portrait orientation hero image for smaller devices.