Other header stuff goes here
The top container I called 'parent' and gave it a fixed position. Inside it I have two containers, 'first-child-1' and 'first-child-2'. I have given them all a height, and the height of the parent has to be the sum of the child containers' height.
In first-child-2 I placed everything pertaining to the dropdown plus the h1 text. This container got the height of 60px which suited the size of the font icon quite well. If the font icon's size is changed, the height of the container will have to be adjusted (and that of the parent!). Make sure you watch the font size of the h1 element on small screens! Try to avoid wrapping.
The other child is intended for the other elements you want to have in the header (overloading will look cluttery!). On small screens this content will wrap, and if more container height is needed, remember to adjust the height of the parent accordingly.
It doesn't really matter what goes where into those two child containers, but the dropdown must be in the lower one.
Then there is the container (this one) with the text and the large image, called 'ample-top-padding'. It is sitting below the parent, not inside it. The top padding (don't use margin here, that will break the design!) must be at least as much as the height of the parent, because the parent's position being fixed and make the next container slide up behind it. So, with the padding the page contents will come clear of the parent, otherwise its content wouldn't be visible. Remember that if the parent's height is changed, the padding has to be changed too.
For wide viewports I have used the flex order property, so that the two 'kids' come down on one level.
Winter night in Arendal, southern Norway.
If you have ample space for the searchbox, those two last # won't be necessary.
I recommend saving this as a theme first, and then you can create a component of the heading with menu and searchbox included by selecting the 'parent' container.