with your logo this might work.

remove that one rule :

.logo.avia-svg-logo svg {
  height: 220px;
  max-height: 175% !important;
  overflow: visible;
  top: 10px;
  left: calc((1510px/2) - 50vw);
  right: auto;
}

and insert instead:

.logo, .logo a {
  overflow: visible;
}

.logo.avia-svg-logo svg {
  height: 150px;
  max-height: 200% !important;
  overflow: visible;
  overflow: visible;
  left: -30px !important;
  top: 5px !important;
}

to see my converted svg – look: https://webers-testseite.de/tribal/
Advantage – you can influence inside the svg by external events

on your mockup it looks to me if the logo only moves down ( lower than the navigation)
now i looked better to that image – so you have a header with unchecked setting of : “Let Logo And Menu Position Adapt To Browser Window”

because i do not see your page – you know better your setting for container width – on my test page it is 1510px

.logo.avia-svg-logo svg {
  height: 220px;
  max-height: 175% !important;
  overflow: visible;
  top: 10px;
  left: calc((1510px/2) - 50vw);
  right: auto;
}

@media only screen and (max-width: 1509px) {
  .logo.avia-svg-logo svg {
    left: 0px;
    right: auto;
  }
}

btw: – see again test page and code for header_bg – i set in calculated height for it – because this is better to understand how it works. https://webers-testseite.de/tribal/

maybe there had to be adjustments for responsive case in addition.

PS : i think you can have a png as masking image too
https://www.w3schools.com/css/css3_masking.asp

Unfortunately, I cannot inspect the page in question. I think I could also help with your query: Link . But without the page it’s just a guess what it might look like. Maybe the link to masking images will help you.

you can see here a possible solution – even with shrinking header. https://webers-testseite.de/tribal/
The clou is – that shape goes to header_bg – so it is part of #header: https://webers-testseite.de/wp-content/uploads/konvexe-boegen.svg

this is the used svg – the right (smaller side) had to be of min-height of shrinked header height.

The Rest of the code used – you can see on my page

PS: for the following section it would be good to have enough top padding
PPS: the svg had to be one that fits to its dimensions: preserveAspectRatio=”none”

This is not styled to its end usage ( some adjustings had to be made for responsive behaviour!

or do you have a faulty setting for padding-top of #main on those pages?

Read carefully
“For that add to your child-theme functions.php:”
so both php snippets are needed.

____________

on you style.css – remove the code – and then add : Link

@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;
  }
}

_______________

i don’t know what is all inside your child-theme functions.php – (this is not readable via the browsers or in dev tools)
both snippets of mine should be there:

function hide_header(){
?>
<script>
(function($){
  'use strict';
  var c, 
  currentScrollTop = 0,
  header = $('#header');
   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = header.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b  ) {
        header.addClass("hide-header");
      } else if (c > currentScrollTop && !(a <= b)) {
        header.removeClass("hide-header");
      }
      c = currentScrollTop;
  });
})(jQuery);   
</script>
<?php
}
add_action('wp_footer', 'hide_header');

and:

function close_sub_menu_on_click_items(){
?>
<script type="text/javascript">
(function($) {
  $('.av-subnav-menu .menu-item a').on('click', function() {
    $(this).closest('.av-subnav-menu').removeClass('av-open-submenu');
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'close_sub_menu_on_click_items');

now we got one thing that disturbs the usage:
if you are on an anchor that is on the bottom – the submenu will close because it scrolls downl.
But if you then click on an anchor link of the sub-menu – sub-menu does not close on click.

For that add to your child-theme functions.php:

function close_sub_menu_on_click_items(){
?>
<script type="text/javascript">
(function($) {
  $('.av-subnav-menu .menu-item a').on('click', function() {
    $(this).closest('.av-subnav-menu').removeClass('av-open-submenu');
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'close_sub_menu_on_click_items');

Opacity has one big advantage – you do not need to find a solution for that sub-menu – because it is not part of #header but of #main it will be a bit complicated to find a solution. Except you go and change some settings on menu.php (sub-menu).
see here my comment on this : https://kriesi.at/support/topic/how-to-make-the-submenu-sticky-on-mobile/#post-1225108
(but do not adopt the alb changings for child-theme menu.php – because that topic is 4years old)
see here sticky submenus on mobile screens : https://webers-testseite.de/transparent-header/
_______
for opacity see demo and code on:
https://webers-testseite.de/pietzas/

you had to correct that sub-menu thing!

by the way the code with only opacity looks well too!

by this script inside your child-theme functions.php:

function hide_header(){
?>
<script>
(function($){
  'use strict';
  var c, 
  currentScrollTop = 0,
  header = $('#header');
   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = header.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b  ) {
        header.addClass("hide-header");
      } else if (c > currentScrollTop && !(a <= b)) {
        header.removeClass("hide-header");
      }
      c = currentScrollTop;
  });
})(jQuery);   
</script>
<?php
}
add_action('wp_footer', 'hide_header');

what does the script do: after a scrolldistance of the header height a class is added to the header : hide-header
it is up to you to neither the whole header goese to opacity: 0 or to set a translateY value etc.

see: https://webers-testseite.de/bemodesign/
css values on that page depends on the given settings.

Are you shure that it is (breadcrumbs) not there? because on inserting that page to header – you had to adjust the padding-top of #main.

Do you only like to see the burger icon fixed – or do you like to have header too fixed on top?

by the way – if it is the page that belongs to your nick – it would be better to break at 990px to hamburger menu.

Then try this :

@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 !important;
    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;
  }
}

Wie willst Du es haben: immer Bild zuerst – dann Text ?
In dem Fall müßtest du jetzt die Grid-Rows bearbeiten bei denen das Bild rechts ist.
Die öffnest du im Editor, weiterhin dann die Zelle öffnen :

dort zu dem Advanced Tab und dort dann die Linke Zelle auf Position 2 und die Rechte Zelle auf Position 1 setzen.
Wenn du dort in den Zellen nur die Hintergrundbilder hast – entweder – wie schon geschehen einen min-height setzen.
ich bevorzuge in die Zellen einen Whitespace Separator zu ziehen. Wie du willst.

and you have found on top right the switch between Slide and Layers.
Go to Slide then navigate to Timing & Transition – and go to Slide Transitions – press Select Transitions – and choose the type you like to have.

you can decide it on the grid-cell options.
You can edit the options for the grid-row – but on each of the cells there is the possibility to edit the cell.
Goto : Advanced Tab – Responsive :

see: https://webers-testseite.de/freelancer/

By the way – you can open svg files with good text editors. (Sublime Text on Mac – or Notepad++ on Windows)
That’s a first hint. I opened your logo in Illustrator and created meaningful groups. I then edited these in Sublime Text. Above all, I renamed the standard Illustrator group names (manually) and assigned IDs to the groups.

But unfortunately I’ll have to put you off until after Christmas – from now on I’ll be in off-duty mode.
As I said, it’s always better for us who want to help to be able to analyze the page with the problems.