Simple – look to the header behaviour on desktop screen width.

believe it or not – my first solution with sticky header on every screen width was the best.
Then you can decide to shift the header including sub-menu or to set those two things to opacity : 0

shifting is a lot of css – the opacity solution is nice too.

read the post carefully- that script is adding a class to the #header
so you can play with the selector: #header.hide-header to do something with the header – see example page and the code listed there ;)

f.e. (less complicated than a shift to top)

#header.hide-header,
#header.hide-header + #main #sub_menu1 {
  opacity: 0;
  transition: opacity 2s ease;
}

#header:not(.hide-header),
#header:not(.hide-header) + #main #sub_menu1 {
  transition: opacity 0.5s ease;
}

it is working – and my snippet is working too. But i wouldn’t make that space between your navigation and the first section not by setting up a margin top/bottom on color section. This looks bad on responsive case.
you could have done this:

#header_main_alternate {
  margin-bottom: 40px;
}

because header_main_alternate goes to display: none in responsive case – there will be no distance then between header and main.

By the way : nice to have a response on having success with the code ;)
no thanks is needed but just a success report

ok – then erase the given css code.
But for having the submenue sticky aswell there had to be hardcoded changes to enfold elements. This is not so easy as just css settings.

PS:

but even 990px are not enought – your menue overlays the logo much earlier.

@media only screen and (max-width: 1080px) {
    #top #header .av-main-nav > li.menu-item:not(.menu-item-search-dropdown)  {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

give this a try:

@media only screen and (min-width: 990px) { 
  .html_header_top.html_logo_center #top #header_main_alternate .main_menu {
    width: 100%
  }

  .html_header_top.html_logo_center #header_main_alternate .main_menu #avia-menu {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: space-evenly;
  }

  .html_header_top.html_logo_center #header_main_alternate .main_menu  .av-main-nav > li > a {
    padding: 0 !important;
    font-size: 19px !important;
  }
}

i guess you will set the header widget to display none on small screens

@media only screen and (max-width: 989px) { 
  #header .widget {
    display: none;
  }
}

by the way: is it intentional that the container width is set to 1130px ?

or just – activate the option in main menue to show search icon ( this is the one for ajax search )

and put this to your child-theme functions.php:

function add_search_to_main_menu($items, $args) {
    if ($args->theme_location == 'avia') { 
        $search_form = '<li id="menu-item-search-desktop" class="menu-item av-medium-hide av-small-hide av-mini-hide" role="menuitem">' . get_search_form(false) . '</li>';
        $items .= $search_form;
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_search_to_main_menu', 10, 2);

and this to quick css:

#avia-menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
#top #searchform > div {
  position: relative;
  max-width: 220px;
  opacity: 1 !important;
  display: block !important;
}
/*=== synchronise it with your hamburger breakpoint ===*/
@media only screen and (min-width: 990px) {
  #menu-item-search {
    display: none;
  }
}

Advantage : Ajax Functionality is preserved for mobile case.
see: https://enfold.webers-webdesign.de/

PS: after you have seen the demo page, I will remove it again, because it disturbs other demos on the site.
e.g. the one with left and right header layout

You have to find these rules:

@media only screen and (min-width:768px) and (max-width:989px) {
  body,
  body .avia-tooltip {
    font-size:80px
  }
  h1 {
    font-size:60px
  }
  h2 {
    font-size:50px
  }
  h3 {
    font-size:42px
  }
}
@media only screen and (min-width:480px) and (max-width:767px) {
  body,
  body .avia-tooltip {
    font-size:66px
  }
  h1 {
    font-size:46px
  }
  h2 {
    font-size:37px
  }
  h3 {
    font-size:29px
  }
}
@media only screen and (max-width:479px) {
  body,
  body .avia-tooltip {
    font-size:53px
  }
  h1 {
    font-size:38px
  }
  h2 {
    font-size:28px
  }
  h3 {
    font-size:20px
  }
}

This is a very unusual scaling.
First of all, the value for the base (body) is set very high.
Even if you take the aspect of wai aria into account, a body font-size of 53 ( below 479px) is gigantic. For desktop screen widths, this is 13px.
Here I would rather go higher, e.g. to 16px.

Because you have set a merging of the styles – i can not say where the rules comes from ( maybe it is a merging of W3total Cache ).
have a look if you have set on General Styling – Typography these values or in your quick css.

i’m participant as you are – so no private content for me. But now – seriously – now i’m out – first guest will arrive at 3pm

by the way – this is as Rikard mentioned a color-section with 100% height :
https://webers-testseite.de/fullbackground/

if this belongs to your belgium page – i can see the svg logo.
First – even if the text in your svg is a common font (helvetica) it might be better to convert those letters to path.

try it with: https://webers-testseite.de/logo-top.zip

https://webers-testseite.de/logo-top.svg

by the way: you are not forced to have the logo inside that logo container – you can overlap the header area:
https://webers-testseite.de/overlapping-logo/

but you can use on those pages a custom shortcode for breadcrumb.
There is one for breadcrumb only on docu:

function av_breadcrumbs_shortcode( $atts ) {
  return Avia_Breadcrumb_Trail()->get_trail( array( 'separator' => '/', 'richsnippet' => true ) );
}
add_shortcode( 'av_breadcrumbs', 'av_breadcrumbs_shortcode' );

But if you like to have both – look further on that page: https://webers-testseite.de/breadcrumbs-shortcode/

use an extra color-section (custom class with: breadcrumb-section) and styling background-color: alternate content.

try to give an ID to the selector f.e.:

#top .blokje .avia-image-overlay-wrap a.avia_image {
  overflow: visible;
}
#top .blokje img.avia_image {
  border: 1px solid #005999;
  padding: 40px;
  box-shadow: 5px 5px 0px 0px #005999;
}

i placed here a different value so that you can clearly see that “shadow” will work – afterwards you can change back to your box-shadow.

and btw: https://kriesi.at/support/topic/changing-buttons-colors-to-gradient/#post-1473778

or rather prevent their creation : Go to Blog Layout – Single Post Options – Disable Single Postnavigation

Even if it is possible – would it look nice inside a 30% width of a sidebar?
you can use that existing page-content alb shortcode. But using fullwidth elements inside that page will break your widget area

f.e. code:
[av_postcontent link='page,45527']

@ismael – maybe your snippet works with the add_attachment hook too? So to say on uploading new images.

Otherwise i found this snippet that creates title, alt and description by file name source:
(bring the first Letter of each work to uppercase (ucwords) – and removes the hyphens etc )

function my_set_image_meta_upon_image_upload( $post_ID ) {

	// Check if uploaded file is an image, else do nothing

	if ( wp_attachment_is_image( $post_ID ) ) {

		$my_image_title = get_post( $post_ID )->post_title;

		// Sanitize the title:  remove hyphens, underscores & extra spaces:
		$my_image_title = preg_replace( '%\s*[-_\s]+\s*%', ' ',  $my_image_title );

		// Sanitize the title:  capitalize first letter of every word (other letters lower case):
		$my_image_title = ucwords( strtolower( $my_image_title ) );

		// Create an array with the image meta (Title, Caption, Description) to be updated
		// Note:  comment out the Excerpt/Caption or Content/Description lines if not needed
		$my_image_meta = array(
			'ID'	=> $post_ID,		// Specify the image (ID) to be updated
			'post_title'	=> $my_image_title,		// Set image Title to sanitized title
			'post_excerpt'	=> $my_image_title,		// Set image Caption (Excerpt) to sanitized title
			'post_content'	=> $my_image_title,		// Set image Description (Content) to sanitized title
		);

		// Set the image Alt-Text
		update_post_meta( $post_ID, '_wp_attachment_image_alt', $my_image_title );

		// Set the image meta (e.g. Title, Excerpt, Content)
		wp_update_post( $my_image_meta );

	} 
}
add_action( 'add_attachment', 'my_set_image_meta_upon_image_upload' );