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
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