Hamburger menu as an added custom menu on the header

Hi guys,

I’m hoping you can help me out. I’m working on adding an extra custom menu to my header. I would like this to be a hamburger menu with slide-in function which is visible (and working) on desktop and mobile. When viewed on a small screen, the two seperate menu’s should join into one.
Tony Robbins gives a good example of what I would like to achieve.

I am fairly new to WordPress and am developing this site locally, so unfortunately I cannot provide a link.
What I have done so far:

1. Registered a new menu in a site-specific plugin:

function wpb_custom_new_menu() {
  register_nav_menu('slide-in-menu',__( 'Slide In Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

2. Using the WordPress dashboard, appearance, menu’s: I added pages to this menu

3. I added this menu to the header of my theme:

<?php wpb_custom_new_menu( array( 'theme_location' => 'slide in menu', 'menu_class' => 'slide-in-menu-class' ) ); ?>

4. I created a js file for the code, named this ‘slidepanel.js and uploaded it to a newly-made js folder in my childtheme:

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="https://localhost:8888/testwebsite/wp-content/themes/testwebsite-child/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="https://localhost:8888/testwebsite/wp-content/themes/testwebsite-child/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

5. Then I returned to the header file and wrapped my code so that it would toggle:

<div id="toggle">
					<img src="https://localhost:8888/testwebsite/wp-content/themes/testwebsite-child/images/menu.png" alt="Show" /></div>
					<div id="popout">
					<?php wpb_custom_new_menu( array( 'theme_location' => 'slide in menu', 'menu_class' => 'slide-in-menu-class' ) ); ?>
				</div>

Unfortunately though, it doesn’t work, even after numerous attempts. All I see is the hamburger icon, exactly where it should be, but:
– it doesn’t toggle open;
– it doesn’t combine with my main menu on a small screen, but stays separate.

I’m hoping someone here can help me out. Maybe there’s something wrong with my code? Maybe I’m working in the wrong files? Any help or other suggestions on how to achieve success in this area would be much appreciated!

Thank you ??