ok – if you like to have on default a sidebar header – and on homepage only the header top position.
( for that scenario we need than a bit different css too if you like to have slide-out from left to right)

1 set your enfold child to header top and make all your decisions you like to have for that header ( height, logo left or right, navigation position, shrink or not, etc pp )

2 Go to your homepage editor and make your decision there – f.e. if it should have transparency etc.

3 Look now to your homepage with dev tools of your browser. Note your ID of that page and look what classes are set on #header
e.g.: ( all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled )

4 now switch back to your header left position.

put this to your child-theme functions.php:

(remove options you do not need – or replace – f.e. header_size and header_custom_size and replace by header_size: ‘slim’ / or large )
find those header settings in : avia_header.php

function av_change_header_style($header){
  if(is_page(array( 17, 123456))){ 
    $header['header_position']    = "header_top";
    $header['header_layout']      = 'logo_right main_nav_header menu_left';

    $header['header_size']        = 'custom';
    $header['header_custom_size'] =  140;
    $header['header_shrinking']   = 'header_shrinking';
    $header['header_sticky']      = 'header_sticky';
    $header['header_shrinking']   = 'header_shrinking';

    $header['header_class'] = " all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled";
  }
    return $header; 
}
add_filter('avf_header_setting_filter','av_change_header_style');

here in this example there are two pages (ID’s) replaced with that different layout – adjust to your home page ID
this filter has a lot more options.

see example page: https://clean.webers-testseite.de/

this is the whole css for transparency fixed header on small screens ( if header_meta is present some height values had to be corrected ) from my testpage above:

@media only screen and (max-width:989px) {
  .responsive #top #wrap_all #header .container {
    width:95%;
    max-width:95%
  }
  #header {
    position:fixed !important;
    height:80px !important;
    max-height:80px !important
  }
  .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
  }
  #top .header_bg,
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color:transparent !important
  }
  .responsive.html_mobile_menu_tablet #top #wrap_all #header:not(.av_header_transparency) {
    background-color:#FFF !important
  }
  #top #header.header-scrolled .header_bg {
    background-color:#FFF !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
  }
  html:not(.html_header_transparency) #top .header_bg {
    background-color:#FFF !important
  }
  .responsive:not(.html_header_transparency).html_mobile_menu_tablet.html_header_top #top #main {
    padding-top:80px !important
  }
}

try:

@media only screen and (max-width:989px) {
  .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
  }
}

_______________

in layout.css there is that rule – this has to be overwritten – if you set your header to fixed position:

@media only screen and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .responsive #top .av_header_transparency .logo .subtext.avia-svg-logo-sub, 
  .responsive #top .av_header_transparency .logo img.alternate {
    display: none;
  }
}

so it should be possible to have a burger menu on placing f.e. a code-block element with html code:

<nav class="datenschutz-menu" role="navigation">
  <div class="container av-menu-mobile-active">
    <a href="#" class="mobile_menu_toggle no-scroll" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
      <span class="av-current-placeholder">Datenschutz</span>
      <span class="subnav-hamburger subnav-hamburger--spin-r">
        <span class="subnav-hamburger-box">
          <span class="subnav-hamburger-inner"></span>
        </span>
      </span>
    </a>
    [menu name="datenschutz"] 
  </div>
</nav>

and then influencing it by:

function subnav_hamburger_first(){
?>
<script>
(function($){
    var $subham = $(".mobile_menu_toggle");
    $subham.on("click", function(a) {
		$subham.find(".subnav-hamburger").toggleClass("is-active");
		$subham.next(".menu-datenschutz-container").find('#menu-datenschutz').toggleClass("av-open-submenu");
    });
	$('#menu-datenschutz li').on("click", function(b) {
		$(this).addClass('selected').siblings().removeClass('selected');
		$(this).parents('#menu-datenschutz').toggleClass('av-open-submenu');
		$(this).parents('.av-menu-mobile-active').find('.subnav-hamburger').toggleClass('is-active');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'subnav_hamburger_first');

and a lot of css then

see on https://webers-web.info/hamburger/

PS: sorry i had to reinstall the whole website – so Privacy page is still not that way discussed above – i will change that today.

see here on very small screens: https://webers-web.info/datenschutz/
that sidebar menu on the left goes to a hamburger on top right on small screen width.

you see on the link above (https://jonsuh.com/hamburgers/) – and (on enfold main burger DOM ) what are the class names – i used them too – because then a predefined look is allready present.:
and the script to manage the burger is allready loaded

(page-id-3 – is my privacy page)

add_action('ava_after_main_menu', function() {
	if ( is_page(3)){
		echo '<nav class="datenschutz-menu" role="navigation">';
		echo '<div class="container av-menu-mobile-active">';
		echo '<a href="#" class="mobile_menu_toggle no-scroll" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="av-current-placeholder">Datenschutz</span>';
		echo '<span class="subnav-hamburger subnav-hamburger--spin-r"><span class="subnav-hamburger-box"><span class="subnav-hamburger-inner"></span></span></span>';
		echo '</a>';
		echo do_shortcode('[menu name="datenschutz"]');	
	 	echo '</div>';
		echo '</nav>';
	}
});

on that line: echo do_shortcode('[menu name="datenschutz"]'); you see the usage of that menu shortcode

now i got that extra subnav-hamburger (this name is set by me – it only reminds me that this is subnavigation on privacy page )
now i have to have the same behaviour on that second burger menu:

function subnav_hamburger_first(){
if(is_page(array( 3))){ 
?>
<script>
(function($){
    var $subham = $(".mobile_menu_toggle");
    $subham.on("click", function(a) {
		$subham.find(".subnav-hamburger").toggleClass("is-active");
		$subham.next(".menu-datenschutz-container").find('#menu-datenschutz').toggleClass("av-open-submenu");
    });
	$('#menu-datenschutz li').on("click", function(b) {
		$(this).addClass('selected').siblings().removeClass('selected');
		$(this).parents('#menu-datenschutz').toggleClass('av-open-submenu');
		$(this).parents('.av-menu-mobile-active').find('.subnav-hamburger').toggleClass('is-active');
	});
})(jQuery);
</script>
<?php
}}
add_action('wp_footer', 'subnav_hamburger_first');

This is not a trivial request, which is why there are several paid plugins available. To grasp the complexity of a multilevel burger menu, take a look at the avia-snippet-hamburger-menu.js code.