Move header image down with screen width

So I’m making this website for my band. So far the desktop version is coming along alright. I had to figure out how to make the header image stay the full width of the screen and not go past that width on smaller devices. I used this CSS code to achieve that:

.has-header-image.home .custom-header, .has-header-video.home .custom-header {
        display: block;
	height: 60vw;
        overflow: hidden;
}

Now, however, because the image gets smaller on narrow devices, the logo and menu in the top of the screen overlap the image way too much. Is there a way to make the header image (and content, that button in the center) move down and create a space above it for the logo and menu? But only on narrow devices. I need the logo and menu to overlap the header image on desktop.

Kind thanks!

• This topic was modified 5 years, 4 months ago by jenshendriks.

The page I need help with: [log in to see the link]