How to display “Enfold Main Menu” and “Enfold Secondary Menu” in burger menu

use your footer menu for that. If you do not like to show that menu – set it to display: none. via quick css.
it goes without saying that the hamburger menu must be set to full page overlay!

this snippet goes to child-theme functions.php:

function footer_menu_to_hamburger_menu(){
?>
<script>
(function($){
  $('#header').one('click', '.av-main-nav-wrap', function() {
    var isMobile          = $('.av-burger-overlay').css('display'),
        footerMenu        = $('#avia3-menu'),
        mobileMenu        = $('#av-burger-menu-ul'),
        footerMenuClone   = $('#avia3-menu').clone(true).addClass('second-burger-menu').css('display', 'block');

    if( footerMenu.length ){
      (footerMenuClone).insertAfter(mobileMenu);
    }
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'footer_menu_to_hamburger_menu');

this to your quick css:

#socket .sub_menu_socket {
  display: none
}

#top .av-burger-overlay-inner {
	display: inline-table;
	top: 0 !important;
}

.html_burger_menu_active #header .avia-menu .av-burger-overlay .menu-item {
  display: block !important;
}

#top .av-burger-overlay #av-burger-menu-ul {
  display: table-cell;
  vertical-align: middle !important;
  width: 50vw;
  padding: 0px 5vw !important;
  text-align: right !important;
  text-transform: uppercase;
  border-right: 1px dashed #999;  /**** a separator if you like ***/
}

#top .av-burger-overlay .second-burger-menu {
  display: table-cell !important;
  width: 50% !important;
  height: 100%;
  left: 50vw !important;
  padding: 0px 5vw;
  vertical-align: middle !important;
  text-align: left;
  text-transform: uppercase;
  z-index: 115;
}

.html_burger_menu_active #header .avia-menu .av-burger-overlay .second-burger-menu .menu-item {
  font-size: 24px;
  line-height: 2.7em;
  padding: 0.3em 0;
}

.html_burger_menu_active #header .avia-menu .av-burger-overlay .menu-item a {
  color: #FFF !important;
}

.html_burger_menu_active #header .avia-menu .av-burger-overlay .menu-item a:hover {
   opacity: 0.7;
}

.html_burger_menu_active #header .avia-menu .av-burger-overlay-inner .avia-menu-fx {
  display: none;
}

#top .av-burger-overlay-bg {
  background-image: url(/wp-content/uploads/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  filter: brightness(0.1);
}

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

PS: the behavior of shifting the content left side was the setting before testing your requested hamburger option – it is part of non-fullpage overlay that hamburger pushes the content side

this is based on footer menu – so if you haven’t activated the footer menu – there will be no effect!

where do you load your jQuery script?
See on enfold options: Enfold – Performance – “Load jQuery In Your Footer” ?
if you load it in the footer we had to set a priority that the script is loaded after jQuery
in this case replace the last line :

add_action('wp_footer', 'footer_menu_to_hamburger_menu');

by:

add_action('wp_footer', 'footer_menu_to_hamburger_menu, 999');

you are welcome