When you open the page, I have a navbar to display a slogan and is the bar that the toggler button is upon. There is a second navbar that is the target of the toggler button. It displays as a side menu. You must click the toggler button 2 times to get the menu to start toggling correctly.
<style>
#menu li a {
line-height: 22px;
height: 22px;
width: 160px;
background-size: auto;
text-align: right;
padding-top: 0px;
color: #eee;
}
#menu {
min-width: 210px;
}
.fa-bars {
color: white;
}
.businessAddress li {
list-style-type: none;
font-size: 14px;
text-align: right;
margin: 0;
color: #eee;
}
</style>
<div class="container">
<div>
<h1>
Company Header
</h1>
</div>
<div class="navbar bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="False" aria-label="Toggle navigation">
<span><i class="fa fa-bars"></i></span>
</button>
<h2 class="mx-auto">
Slogan
</h2>
</div>
<div class="row">
<div class="col-md-3">
<div class="navbar bg-success" id="menu">
<ul class="navbar-nav">
<li class="navItem active"><a href="#">Home Link</a></li>
<li class="navItem"><a href="#">Services Link</a></li>
<li class="navItem"><a href="#">Contact Link</a></li>
</ul>
<ul class="businessAddress d-none d-md-block">
<li> </li>
<li>Company Name</li>
<li>Street Address</li>
<li>City, ST Zip</li>
<li> </li>
<li>123-456-7890</li>
</ul>
</div>
</div>
</div>
</div>
The behavior is that when you first open the page, the menu navbar is already displayed. This is the desired behavior. But you have to hit the toggler button 2 times to get the side menu to collapse and it does collapse on the second go. And it will properly expand/collapse after this point. However, if you go to a different link on the menu or refresh the page the toggler button requires 2 clicks to start working correctly.
Any thoughts on how can I get the toggle to start off working right away?
Much appreciated, Kent
