Header going over banner when zoomed in

I’m using the following section to put a simple banner on the top of my home page:

<header class="main-header" role="banner">
<img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.hero_img }}" alt=""/>
</header> 

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

Here’s an example

What’d be the simplest solution to fix this issue? (I’d be fine fixing the header height or to take any other sensible suggestion)

Ps.: I’m using Sleek theme, and I really just hacked into it as I had no experience with Jekyll at all.

Thanks in advance