Currently, I am facing an issue with the navbar-toggle button while using Bootstrap.
Initially, I thought the problem was with my navbar code, so I tried pasting the example from the Bootstrap Website, but it did not work either. The button appears, but the dropdown does not show up when clicked.
Upon searching through my project files, I found collapse.js within bootstrap/js/collapse.js.
In addition to Bootstrap, I am also using AngularJS. Here is the code for my navbar:
<nav class="navbar navbar-inverse navbar-fixed-top top-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu">
<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" ui-sref="{{side.landingState}}">
<img class="logo" alt="Logo" src="/assets/img/side_logo_red.png">
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="main-menu">
<ul class="navbar-nav nav nav-list {{side.role}}" data-ng-if="!Guest">
<li class="active nav-icon"><a ui-sref="{{side.homeState}}"><i class="fa fa-home"></i></a></li>
<li class="active nav-icon"><a ui-sref="{{side.postsState}}" ui-sref-opts="{reload: true}"></a></li>
<li class="active nav-icon" data-ng-if="Student"><a ui-sref="{{side.profilePage}}"><i class="fa fa-user"></i></a></li>
<li class="dropdown active nav-icon">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="fa fa-chevron-down"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li data-ng-if="User"><a role="menuitem" ui-sref="{{side.settingsState}}"><div class="icon"><i class="fa fa-cog"></i></div><div class="text">Settings</div></a></li>
<li><a role="menuitem" ui-sref="{{side.futureState}}"><div class="icon"><i class="fa fa-rocket"></i></div><div class="text">Future Services</div></a></li>
<li role="presentation" class="divider" data-ng-if="user"></li>
<li data-ng-if="user"><a role="menuitem" data-ng-click="logout()"><div class="icon"><i class="fa fa-sign-out"></i></div><div class="text">Logout</div></a></li>
</ul>
</li>
</ul>
<ul class="nav-list {{side.role}}" data-ng-if="guest">
<li class="nav-icon"><i class="fa fa-rocket"></i> Sign Up</li>
<li class="nav-icon">Stuff...</li>
<li class="nav-icon">More Stuff...</li>
</ul>
</div>
</div>
</nav>
I am uncertain about what I might be missing here.
Update:
To resolve this issue, I decided to use data-ng-class to toggle the collapse class based on a variable set by the button.
<button type="button" class="navbar-toggle collapsed" data-ng-click="toggleCollapsed()">Within the controller, I implemented the following code:
$scope.collapsed = true;
$scope.toggleCollapsed = function(){
$scope.collapsed = !$scope.collapsed;
};