Develop Reference

Navbar dropdown with Angular and ui-router won't work

I've been banging my head against this for a while, and for some reason I'm unable to get a simple bootstrap navbar dropdown to work with angular ui-router and ui-bootstrap (1.3.3, the latest). Here's my current code:
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Your <img class="logo-img" src="assets/images/formio-logo-lg.png"> application.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ng-class="{active:isActive('calendar')}" ui-sref="calendar" ng-show="authenticated">Duty Shifts</a></li>
<li><a ng-class="{active:isActive('eventIndex')}" ui-sref="eventIndex" ng-show="authenticated">Events</a></li>
<li><a ng-class="{active:isActive('trainingIndex')}" ui-sref="trainingIndex" ng-show="authenticated">Training</a></li>
<li><a ng-class="{active:isActive('shiftIndex')}" ui-sref="shiftIndex" ng-show="authenticated">Shifts List</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="trainingCreate">Add Training</a></li>
<li><a ui-sref="eventCreate">Add Event</a></li>
<li><a ui-sref="shiftCreate">Add Shift</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="authenticated"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="content">
<div class="row" ng-cloak>
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.message}}</uib-alert>
</div>
<div ui-view></div>
</div>
</div>
With this setup, I see the Admin dropdown menu, but clicking does nothing, whether or not I have a ui-sref attribute.
If I do everything suggested in the migration guide for dropdowns, like so:
<li uib-dropdown>
<a ui-sref="home" uib-dropdown-toggle uib-dropdown role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul uib-dropdown-menu>
<li><a ui-sref="trainingCreate">Add Training</a></li>
<li><a ui-sref="eventCreate">Add Event</a></li>
<li><a ui-sref="shiftCreate">Add Shift</a></li>
</ul>
</li>
it still doesn't work. I'm sure I'm missing something obvious, but I'm not sure what. I've looked at the ui-navbar package, but I don't want to have to re-tool everything just for a dropdown if I don't have to.
What am I doing wrong? And yes, I do have ui.bootstrap and ui.router injected in my app definition.
Thanks.

Here is working plunker based on your code.
The admin dropdown inside the navbar looks like:
<li class="dropdown" uib-dropdown>
<a class="dropdown-toggle" uib-dropdown-toggle>
<i class="fa fa-cogs"></i> Admin <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li>
</ul>
</li>
When you click on training, it loads training.html in the div ui-view as a single page application. Note that in the ui-sref I added a ng-click to collapsed the main navigation.
The full navbar looks like:
<nav class="navbar navbar-inverse " role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
<ul class="nav navbar-nav">
<li><a ui-sref="home" ng-click='navCollapsed = true'>Home</a></li>
<li><a ui-sref="home" ng-click='navCollapsed = true'>Link</a></li>
<li class="dropdown" uib-dropdown>
<a class="dropdown-toggle" uib-dropdown-toggle>
<i class="fa fa-cogs"></i> Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
I configure the routing like this:
angular.module('plunker', ['ui.router', 'ui.bootstrap'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home'
})
.state('training', {
url: '/training',
templateUrl: 'training.html',
});
})
Let us know if that helps. Best.

Bootstrap toggle menu on one page site does not uncollapse when clicked

I'm using bootstrap, and it is a one page site. And when I need to use the toggle for mobile devices. The collapse works, but I need to uncollapse when I click on one of the menu liks.
Just need that to deliver the project.
Any thoughts?
http://www.neevasoft.com/docasnovo
html
<header id="header" class="navbar-fixed-top main-nav" role="banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Logo start -->
<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>
<a class="navbar-brand" href="#home">
<img class="img-responsive" src="images\logo.png" alt="logo">
</a>
</div><!--/ Logo end -->
<nav class="collapse navbar-collapse clearfix" >
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#home">Home</a></li>
<li><a class="page-scroll" href="#services">A Empresa</a></li>
<li><a class="page-scroll" href="#historia">História</a></li>
<li><a class="page-scroll" href="#about">Participações</a></li>
<li><a class="page-scroll" href="#team">Renovada</a></li>
<li><a class="page-scroll" href="#contact">Contato</a></li>
<li><a class="page-scroll" href="acervo.html" onClick="window.location='acervo.html'">Acervo</a></li>
<!--li><a class="page-scroll" href="#contact">Contact</a></li-->
</ul>
</nav><!--/ Navigation end -->
</div><!--/ Col end -->
</div><!--/ Row end -->
</div><!--/ Container end -->
</header><!--/ Header end -->

You can simply add to each li the following attributes:
<li data-toggle="collapse" data-target=".navbar-collapse">
<a class="page-scroll" href="#home">Home</a>
</li>
....
....
no need for JavaScript code here. because bootstrap will take care of it.

You can use .collapse('hide') from collapse.js. Docs
jQuery(document).ready(function($) {
$("li a.page-scroll").click(function() {
$(this).closest(".navbar-collapse.in").collapse('hide');
});
});

issues with navbar links not collapsing

firstly apologies opening a question on which should be seen as a fairly simple issue....and it should be, but I cant get it working to save my life.
Maybe someone can just give this code a quick scan and tell me what I am doing wrong, as I am not to familiar with bootstap (which im using here) and HTML5
My Problem
Navbar working perfectly on home page but when copy and pasting navbar to other pages the services and menu links simply do not expand / collapse
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Finger Food Catering</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hot Platters</li>
<li>Cold Platters</li>
<li>Gourmet Platters</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Wedding Catering</li>
<li>Birthday Catering</li>
<li>Corporate Catering</li>
<li>Event Catering</li>
<li>Funeral Cateringg</li>
</ul>
</li>
<li>About</li>
<li>Testimonials</li>
<li>Inquire</li>
<li>Blog</li>
<li class="active">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span style="font-size:2.0em"><span style="color:#8AB8E6">Contact Us:</span> <body onload="_googWcmGet('number', '1300 785 701')">
<span class="number">1300 785 701</span>
</body> </a></li>
</ul>
</div>
</div>
</nav>

Are you using Materialize?
If you are, scroll down to the bottom of index.php where the scripts are and change <script src="../../bin/materialize.js"></script> to <script src="js/materialize.js"></script>

Bootstrap 3 does not collapse navbar on mobile or tablet size

I'm trying to make the navbar collapsible but for some reason it collapse and close its self very fast.
Here is my code:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">
<img class="logo" src="../img/logo.png" /></a>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Library</li>
<li>About</li>
<li>Contact</li>
<li>
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
Log In
</AnonymousTemplate>
<LoggedInTemplate>
<li class="dropdown">Settings<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header"><asp:LoginName ID="HeadLoginName" runat="server" /></li>
<li>Accounts</li>
<li><asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/" /></li>
</ul>
</li>
</LoggedInTemplate>
</asp:LoginView>
</li>
</ul>
</div>
</div>
</div>
Can someone tell me whats the problem with it?

Change your "button" to a "div" tag this will prevent a post back from happening.

Twitter bootstrap dropdown menu not displaying

My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-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>
<div class="collapse navbar-collapse" id="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>

Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.