Ggtcf

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);