Header mit fester Größe dauerhaft bei gleichbleibender Navigationsleiste

Bist du vertraut mit dem Child-theme umgang?

man kann auch html code direkt mit jQuery in ein Element als erstes Kind setzen . ( prepend )
Eine gute Stelle für dein Unterfangen wäre sicherlich als erstes Kind innerhalb von #main
das Styling könnte man auch über quick css machen – man kann es aber auch sofort im script setzen.

wichtig für das responsive Verhalten ist die Kenntnis über das Seitenverhältnis deines Bildes.
wir setzen die Breite des eingefügten Containers auf volle Screenweite : 100vw
und die Höhe dann entsprechend der Bildseitenverhältnisse auf zB 50vw wenn das Verhältnis 2:1 ist

Dies kommt in die Child-Theme functions.php:

function insert_as_first_child_in_main() { 
?>
<script>
(function($){
	$( '#main' ).prepend('<div class="after-header"></div>');
	$('.after-header').css({
	"background": "url(url-to-your-image.jpg)",
	    "background-size": "cover",
	    "background-repeat": "no-repeat",
	    "width": "100vw",
	    "height": "35vw",
	})
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_as_first_child_in_main');

PS : bei transparentem Header ist es dann natürlich auch unterhalb des headers ( wie das eben mit #main auch vorher war )

Also : die Header Sachen kannst du im Enfold Optionen Dialog unter dem Tab Header einstellen:

Header – Header Layout – Menu and Logo Position: Logo Top – Menu Below. ( kannst du hier sehen: https://webers-testseite.de/kontakt/ )

Dann wie oben beschrieben
habe es mal für Dich auf dieser Seite so gemacht ;)
Du siehst es kappt auch responsiv ( nur der Header nicht – weil ich auf meiner Testseite auch mit Headervarianten gespielt habe. – die anderen Seiten haben andere Header Layouts)

ich muss deine Seite sehen. – ins blaue hinein vermutungen anzustellen ist nicht zielführend.
Es wird aber mit der von Enfold festgelegten Verhalten für Header schwer. Denn die Position wäre entweder in header_meta als last-child oder in header als first-child – beide Positionen sind bei einem fixierten header schwer zu realisieren. Der Content (#main) muss ja auch noch die Info erhalten welches Padding es zu Top halten muss.

Dieses Snippet oben : Link kommt in die child-theme functions.php
dann gehst du zum widget bereich und fügst den widgetbereich “header” hinzu:

Dann kannst du dort ein Image ALB platzieren in dem Widget ohne Titel ( notiere dir die Aspectratio ) ( in meinem Beispiel 472:1600 = 29.5% )
jetzt nur noch die Responsivität gewährleisten also widget area ohne padding und in 100vw breite höhe entsprechend der AspectRatio ( bei mir 29.5vw)
das img genauso.

Du muss dann natürlich die Seiten .page-id-36310 rausnehmen:

.page-id-36310 #header_main .widget, 
.page-id-36310 #header_main .widget img {
    padding: 0;
    width: 100vw;
    height: 29.5vw;
}

.html_top_nav_header.html_header_top.html_header_sticky #top.page-id-36310 #wrap_all #main {
    padding-top: calc(29.5vw + 85px);
}

@media only screen and (max-width:767px) {
	.responsive #top.page-id-36310 #main {
	  padding-top:0 !important;
	}
}

Leider ist es so, dass wenn man den Header sticky hat der Bereich auch sticky ist.
wenn man den header auf scroll hat – scrollt es mit raus:
https://webers-testseite.de/kitten/