Bootstrap navbar not working on iPhone

The bootstrap 4.4/1 navbar and hamburger will work appropriately on ipad or mac computer, but not on iphone.

On the iphone the navbar will shop a dark blue banner as it should along with the hamburger.  But when you press the hamburger the navbar will not increase in height with a wider blue navbar to allow viewing of the menu items.  The menu items are displayed, but since the lettering is in white (since navbar is dark blue) , it cannot be seen.  

It works fine on an ipad.  Any help to point me in correct direction would be appreciated.

here is site;   http://www.newmadisonhomes.com

here is nav code:

<section>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top py-sm-0 " style="background-color:#061C52 !important"> <a class="navbar-brand" href="#">
<img src="../images/Mad-logo_h65.jpg" width="131" height="65" alt=""/> </a>
<!-- Brand -->

<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav nav-fill w-100 ml-auto">
<li class="nav-item">
<a class="nav-link" href="../index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../gallery.html">Gallery </a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Contact.html">Contact</a>
</li>
</ul>
</div>
</nav>

<div class="container-fluid ">
<div class="row " >
<div class="col-sm-12 col-lg-12 mt-5">

<h5 class="text-body text-center">Madison Homes, Inc.</h5>
<h6 class="text-body text-center">Custom Built Homes and Remodeling</h6>
</div>
</div>
</div>
</section>