Here is the code I am using:
<nav class="navbar navbar-default navbar-fixed-top" id="mainNav">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="/application/themes/dcc_theme/img/DiscoveryChurchColorado.png" alt="Discovery Church Colorado, Colorado Springs, CO" class="img-responsive">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=""><a href="http://concrete.metooplace.com/about" target="_self" class="">About</a>
</li>
<li class=""><a href="http://concrete.metooplace.com/serve" target="_self" class="">Serve</a>
</li>
<li class=""><a href="http://concrete.metooplace.com/events" target="_self" class="">Events</a>
</li>
<li class="nav-selected nav-path-selected"><a href="http://concrete.metooplace.com/give" target="_self" class="nav-selected nav-path-selected">Give</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The url for the test page is http://concrete.metooplace.com
The problem is that on a mobile device you can click the menu button and the menu will expand, but it won't close if you click it again.
This was working fine. I must have inadvertently changed something, or there is a conflict in my javascript, but I can't seem to figure out what happened and I need a fresh set of eyes to check it out.
It was the version of the Bootstrap JS. I changed it to a 3.3.6 CDN version and it worked.