a href links not working when using a dropdown menu inside of a offcanvas

[bobvmierlo]

When using offcanvas to show a menu on mobile devices, the a href links inside of a dropdown-menu are not working. While other a href links not inside of a dropdown-menu are working fine.

Any ideas on how to make the a href links inside of the dropdown-menu work?

I'm using the latest bootstrap.bundle.js and bootstrap.css. See my code here:

<b class="screen-overlay"></b>
	
	<nav id="navbar_main" class="navbar mobile-offcanvas navbar-hover navbar-expand-lg navbar-light bg-light">
	<div class="container">
	<div class="offcanvas-header">  
	  <button class="btn btn-danger btn-close float-right"> &times Close </button>
	  <h5 class="py-2 text-white">Main navbar</h5>
	</div>
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="megamenu\megamenu.html"> Home </a></li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown menu  </a>
				<ul class="dropdown-menu animate fade-up">
					<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
					<li><a class="dropdown-item icon-arrow" href="#"> Dropdown item 2 </a>
						<ul class="submenu dropdown-menu  animate fade-up">
							<li><a class="dropdown-item" href="megamenu\megamenu.html">link</a></li>
							<li><a class="dropdown-item" href="">Submenu item 2</a></li>
						</ul>
					</li>
					<li><a class="dropdown-item" href="megamenu\megamenu.html"> link </a></li>
				</ul>
				</li>
			</ul>
		</div>
	</nav>

Also using this extra js file to make the menu work:

// http://bootstrap-menu.com

$(document).ready(function(){
/// Prevent closing from click inside dropdown
$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});


// refresh window on resize
$(window).on('resize',function(){location.reload();});


if ($(window).width() < 992) {
    $('.has-megasubmenu a').click(function(e){
        e.preventDefault();
        $(this).next('.megasubmenu').toggle();

        $('.dropdown').on('hide.bs.dropdown', function () {
           $(this).find('.megasubmenu').hide();
        })
    });

    $('.dropdown-menu a').click(function(e){
      e.preventDefault();
        if($(this).next('.submenu').length){
          $(this).next('.submenu').toggle();
        }
        $('.dropdown').on('hide.bs.dropdown', function () {
       $(this).find('.submenu').hide();
    })
    });
}


/// offcanvas onmobile
$("[data-trigger]").on("click", function(e){
      e.preventDefault();
      e.stopPropagation();
      var offcanvas_id =  $(this).attr('data-trigger');
      $(offcanvas_id).toggleClass("show");
      $('body').toggleClass("offcanvas-active");
      $(".screen-overlay").toggleClass("show");
  }); 

/// Close menu when pressing ESC
$(document).on('keydown', function(event) {
    if(event.keyCode === 27) {
       $(".mobile-offcanvas").removeClass("show");
       $("body").removeClass("overlay-active");
    }
});

$(".btn-close, .screen-overlay").click(function(e){
  $(".screen-overlay").removeClass("show");
    $(".mobile-offcanvas").removeClass("show");
    $("body").removeClass("offcanvas-active");

}); 



}); // document ready //end