CUSTOM MOBILE NAVIGATION

<div class="mobile-nav">
 
    <div class="logo">
        <a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo-2.png"></a>
    </div>
 
    <div class="mobile-menu">
        <!-- Menu Button -->
        <h3 class="acc_trigger">
            <a href="#">
                <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/menu-btn-white.png" class="menu-btn" />
            </a>
        </h3>
        <div class="acc_container">
            <?php wp_nav_menu( array('menu' => 'Main Nav Mobile' )); ?>
        </div>
 
    </div>
 
    <div class="clear"></div>
</div>

<script>
    jQuery(document).ready(function ($) {
        //Set default open/close settings
        var divs=$('.mobile-menu>div').hide(); //Hide/close all containers
 
        var h2s=$('.mobile-menu>h3').click(function () {
            h2s.not(this).removeClass('active')
            $(this).toggleClass('active')
            divs.not($(this).next()).slideUp()
            $(this).next().slideToggle()
            return false; //Prevent the browser jump to the link anchor
 
            });
 
    }); // Mobile Nav
 
    jQuery('#overlay').click(function(){
      jQuery(this).hide();
      jQuery('#youtube_id').get(0).playVideo();
 
    });
</script>