i see that there is only on style.css that code .
So better remove all – and add:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }
  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }
  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }
  #header_main {
    border-bottom: none;
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px;
    max-height: 80px !important;
    line-height: 80px !important;
  }
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }  
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }
  #top .header_bg {
    background-color: transparent !important;
  }
  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #edddc6 !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  /*** depends on your setting  ***/
  #top #header.av_header_transparency #header_meta .phone-info * {
    color: #FFF !important;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #edddc6;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
  .responsive #top #main {
    padding-top: 110px !important;
  }
  .responsive #top #main .sticky_placeholder {
    height: 0px !important;
  }
  .responsive #top #main .av-submenu-container {
    position : fixed !important;
    top: 110px !important;
  }
}

.responsive #top #wrap_all #header.hide-header,
#header.hide-header + #main #sub_menu1 {
  opacity: 0 !important;
  transition: opacity 1s ease;
}

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

@media only screen and (max-width: 469px) {
  #header {
    height: 140px !important;
    max-height: 140px !important;
  }
  #header_main {
    height: 80px;
  }
  .header_bg {
    height: 140px;
  }
  .responsive #top #main {
    padding-top: 140px !important;
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 60px;
    max-height: 60px !important;
    line-height: 60px !important;
  }
  .responsive #top #main .av-submenu-container {
    position : fixed !important;
    top: 140px !important;
  }

  #top .av-submenu-pos-center .mobile_menu_toggle {
    border: none !important;
  }
}

after that we will go on to start fine-tuning.

• This reply was modified 1 hour, 6 minutes ago by Guenni007.

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/abcdef/

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']