Mobile header / logo customization

This should do it:

Customize -> layout -> header -> mobile header: disable

Thanks for your reply. I think you misunderstood.
I do not want to turn a mobile header/logo off, I would like to place it as in the sketch. Above the main menu, not inline and small as in the screenshot.

The point of the mobile header is a more streamlined approach where the header takes up less space.

The layout you're looking for looks like the theme should with the mobile logo disabled. Are you just wanting to use a different header on mobile than on desktop?

Thanks for the quick answer Tom.
Yes basically that's the idea, a different header with the logo for mobile, in the sense of a compromise between streamlined and full header. The above sketch is the basic idea, I'll most probably tune it down a bit.

The normal, streamlined approach, is not working for my client in this case.

So first, I would disable the mobile header.

Then using GP Hooks, add your mobile header into the Before Header Content hook:

<div class="mobile-logo hide-on-desktop hide-on-tablet">
    <img src="URL TO MOBILE HEADER" alt="" />
</div>

Then add this CSS:

@media (max-width: 768px) {
    .site-logo {
        display: none;
    }
}

Sorry for the late reply Tom, we were on vacations :)
Works like a charm now, thank you!

You're welcome! :)