Bootrap 4 collapse not collapsing/disappearing on page scroll on IOS Safari - wordpress

Question

The navbar-collapse collapses/disappears when clicking a menu link to an actual "page" but it doesn't collapse/disappear when clicking a "custom" menu link to scroll to a different section on the same page.
I have the navbar-collapse appearing as a full screen when toggling the Hamburger Icon. The JQuery fixes this but it still doesn't work on IOS Safari.
HERE IS MY CSS
* { cursor: pointer; }
#site-header{
height: 85px;
top: 0;
z-index: 3000;
}
.logged-in #site-header{
top: 32px;
}
#primary {
margin-top: 85px;
}
.nav {
display: block;
}
.navbar {
height: 75px;
width: 100%;
padding: 0;
background: black;
}
.navbar-nav {
float: none!important;
}
.navbar-collapse {
position: absolute;
background: black;
width: 100%;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 35px;
border: 0px;
margin-top: 0px;
height: 110vh;
left: 0;
top:0;
background-size: cover;
}
.navbar-image {
position: absolute;
opacity: .2;
right: 0px;
top:0%;
margin-top: -15px;
padding-left: 30px;
padding-right: 30px;
bottom: 0;
margin: auto;
z-index: 1;
}
.navbar-image:hover, .navbar-image:active {
-webkit-transition-duration: 5.8s;
-moz-transition-duration: 5.8s;
-o-transition-duration: 5.8s;
transition-duration: 5.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .01s;
-moz-transition: height .01s;
-ms-transition: height .01s;
-o-transition: height .01s;
transition: height .01s;
}
.navbar-collapse ul {
position: absolute;
margin-left: 50px;
margin-top: 80px;
z-index: 2;
}
.navbar-collapse ul li {
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar-collapse ul li a{
color: white!important;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 300;
}
HERE IS THE HTML
<header id="site-header" class="container-fluid">
<nav class="navbar fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler disable" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar top-menu"></span>
<span class="icon-bar mid-menu"></span>
<span class="icon-bar bottom-menu"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav">
<li class="menu-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="nav-link" href="#">Somthing Else</a>
</li>
</ul>
</div>
</div>
</nav>
JQUERY
(function ($) {
$(document).ready(function () {
$(".navbar-collapse ul li a").on("click", function () {
$(".navbar-collapse").collapse("hide");
});
});
})(jQuery);