Header going over banner when zoomed in

Help
#1

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

#2

Hello @jtamiyo,

On desktop, your top level navbar is also overlapping your “hero” image. It’s just not as noticeable as the mobile view.

Since your top level nav is 60px high, try this CSS to create an offset for your hero image.

.main-header {
    margin-top: 60px;
}

Result

[Album] Imgur

BTW, a couple suggestions (if I may) regarding RWD (responsive web design).

  1. Avoid flattening text into an image. I discuss this topic on Quora https://www.quora.com/Is-there-a-program-that-inserts-text-over-images/answer/Mark-Chaves
  2. 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).
  3. Use HTML to create test overlays.
  4. Create a separate portrait orientation hero image for smaller devices.

Happy coding!