CODEWITHSUNDEEP
angular-strap
jhamm
jhamm

Reputation: 25062

My angular strap navbar will not expand

I am using angular-strap to create a navbar. It collapses down to the hamburger icon just like it should, but when it is collapsed (hamburger icon) it will not expand to click on a link. Here is my code:

  <nav class="navbar navbar-default" role="navigation" bs-navbar>
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

The navbar is responsive like expected. Also, the directive is being instantiated, because the breakpoint in the link function gets hit. As explained above when the navbar is in it's hamburger state, it won't expand to make it able to click on any of the links. What else do I need to look at to make this work with angular-strap? How do I make the hamburger icon expand?

Upvotes: 2

Views: 1767

Answers (1)

Seiyria
Seiyria

Reputation: 2132

You can make use of the collapse directive in ng-strap 2.1.3.

This was added very recently.

An example: 

<nav class="navbar navbar-default" bs-collapse>
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" bs-collapse-toggle>
                <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" ng-bind="config.options.page.pageName" ui-sref="root">Doks</a>
        </div>
        <div bs-collapse-target>
            <ul class="nav navbar-nav">
                <li ng-repeat="category in categories" class="item" ng-class="{active: urlParams.category === category}">
                    <a ui-sref="hasCategory({category: category})">{{category}}</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 7

Related Questions