Burger/Mobile menu in Widget or Footer

First : i’m using this shortcode to insert a named menu from wordpress menu options:

maybe an example of mine helps you to find your own way to do it.

function print_menu_shortcode($atts, $content = null) {
    extract(shortcode_atts(array( 'name' => null, ), $atts));
    return wp_nav_menu( array( 'menu' => $name, 'echo' => false ) );
}
add_shortcode('menu', 'print_menu_shortcode');

maybe the menu-shortcode will help you – and f.e. here : https://jonsuh.com/hamburgers/

there are some plugins to test. …

you can see here an example on using that shortcode including the existing classes from enfold to handle a hamburger menu – if you look to the DOM – it is very nearby the setup from : https://jonsuh.com/hamburgers/
because all scripts are allready implemented to enfold – you have to find a way how to insert that DOM Structure

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

but try to find a plugin ( yes the good ones are not free) that handles the hamburger insertion with a given WordPress menu.

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.