Understrap - Off-canvas Mobile Menu

header.php

<?php
        // ...

        <!-- // HAMBURGER MENU TOGGLE // -->
        <button class="navbar-toggler" type="button" data-toggle="modal" data-target="#menuModal" aria-controls="#menuModal" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
		<i class="fa fa-bars menu_burger" aria-hidden="true"></i>
	</button>

	<!-- // DESKTOP MENU // -->
	<?php wp_nav_menu(
		array(
			'theme_location'  => 'primary',
			'container_class' => 'collapse navbar-collapse',
			'container_id'    => 'navbarNavDropdown',
			'menu_class'      => 'navbar-nav ml-auto',
			'fallback_cb'     => '',
			'menu_id'         => 'main-menu',
			'depth'           => 2,
			'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
		)
	); ?>

	<!-- // OFF-CANVAS MOBILE MENU // -->
	<div class="modal fade" id="menuModal" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
			<div class="modal-content">

				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>

				<!-- // Mobile Menu // -->
				<?php wp_nav_menu(
					array(
						'theme_location'  => 'primary',
						'container_class' => 'modal-body',
						'container_id'    => '',
						'menu_class'      => 'navbar-nav ml-auto',
						'fallback_cb'     => '',
						'menu_id'         => 'main-menu',
						'depth'           => 2,
						'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
					)
				); ?>

			</div>
		</div>
	</div>

<?php
	// ...