Toggle button is not working with AngularJS and Angular ui Bootsrap
14,037
Solution 1
I just copied this out of a working project where I used angular-ui bootstrap:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<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="/#">Bake-Off</a>
</div>
<div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Solution 2
You must make some changes to your navbar to accomodate the collapse directive of Angular UI-Bootstrap. I wondered about this myself not so long ago, the question was already asked and answered over here:
Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)
Author by
Sami
Trying to code here and there with Angular, React, Java, Vaadin...
Updated on June 16, 2022Comments
-
Sami over 1 year
The toggle button appears but it is not working. I've got a same code now in online as well and it is not working but in Plunker it is working.
Plunker - toggle button is working
Same code online - button is not working
And the code is:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nalogo-wrapper"> <img class="img-responsive" src="http://placehold.it/50x50&text=Logo" /> </div> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#/view1"><span class="glyphicon glyphicon-home"></span> Etusivu</a></li> <li><a href="#/view2">Palvelut</a></li> <li><a href="#/view3">Yhteistiedot</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div id="main"> <div ng-view> </div> </div>
Thanks for help! Sami