Full screen responsive bootstrap menu with WordPress

sass

// Lock the screen in menu
.noscroll { overflow-y: hidden; }

// Make the menu full screen after collapse
.navbar-full {

	.navbar-toggler {
		z-index: 11;
		&.collapsed {
			+ .navbar-collapse {
				z-index: -1;
				opacity: 0;	
				transition: 250ms ease opacity;				
			}
		}
	}

	.navbar-collapse {
		height: 100vh !important;
		height: auto;
		overflow-y: scroll; 
		position: fixed;
		display: block !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
		transition: 250ms ease opacity;
		opacity: 1;
		z-index: 10;

		&.collapsing, &.show {
			display: block !important
		}
	}

}

scripts.js

// Update your js file to add class at body
// You will need jQuery for this.
$('.navbar-full button').click(function(event) {
		$('body').toggleClass('noscroll');
});

WordPress Menu

<nav id="navmenu" class="navbar navbar-expand-lg navbar-full navbar-light animation-close-toggle w-100">
      <a class="navbar-brand col" href="<?php echo get_home_url(); ?>">        
        Brand
      </a>
      
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span></span><span></span><span></span>
      </button>

        <?php 
          wp_nav_menu( array(         
            'theme_location'    => 'mobile',
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'navbarNav',
            'menu_class'        => 'navbar-nav ml-auto', // A classe mr-auto alinha o menu a direita
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker()
          )); 
        ?>          
</nav><!-- /.navbar-collapse -->