I've been struggling to implement collapsible navbar functionality into my existing navbar which includes multiple dropdowns. Despite my efforts, the collapsible feature doesn't seem to work properly. I suspect that it could be due to the presence of too many nested divs confusing the system.
To illustrate this issue, here's a sample fiddle showcasing the current behavior (note: some jQuery code is omitted):
.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="collapsible-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row collapse navbar-collapse" id="collapsible-navbar">
<div class="col-sm-2 text-center">
<ul class="nav navbar-nav navbar-left collapse navbar-collapse" id="collapsible-navbar">
<li class="navbar-link"><a href="#" class="navbar-link-header">Testimonials</a></li>
<ul class="dropdown-nav row clients">
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a></li>
</ul>
</ul>
</div>
<div class="col-sm-2">
<ul class="nav navbar-nav navbar-left">
<li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a></li>
<ul class="dropdown-nav row locations">
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a></li>
</ul>
</ul>
</div>
<div class="col-sm-4 text-center">
<img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt=""/>
</div>
<div class="col-sm-2">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-link"><a href="#" class="navbar-link-header">Information</a></li>
<ul class="dropdown-nav row information">
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Program</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Food</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">SMT</a></li>
<li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Vibratrim</a></li>
</ul>
</ul>
</div>
<div class="col-sm-2">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a></li>
<ul class="dropdown-nav row sign_in">
<li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a></li>
<li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a></li>
<li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a></li>
</ul>
</ul>
</div>
</div>
</div>
</nav>
Upon inspection, it appears that when clicking the "sandwich" icon, the toggle functionality does not activate the display: none property of the collapse.