0

In my project, I used Bootstrap Nav bar for navigation and also AngularJS as the framework. In desktop view, it's working fine. But in mobile view, the Nav bar is not working properly. It's not auto collapsing when we click on a link.

This is my Nav bar code: 

<nav style="padding:0;margin:0;border:0;" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
                <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="#/" id="mainLogo">
                <img style="max-width:200px;" src="img/logo.png">
            </a>
        </div>
        <div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
            <ul class="nav navbar-nav">
                <li class="submenu">
                    <a href="#/" class="show-submenu">Home </a>

                </li>
                <li class="submenu">
                    <a href="#/collection/brand/model/type/year" class="show-submenu">Our Collection </a>

                </li>
                <li class="submenu">
                    <a href="#/about" class="show-submenu">About us </a>

                </li>
                <li class="submenu">
                    <a href="#/contact" class="show-submenu">Contact us</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

I tried many solutions and still no good.

You can check the real example here.

I tried some Angular code samples and also JS based solutions. Nothing works for me. Can you please provide me a working NavBar sample with Angular. My Angular version is 1.3 and Bootstrap version is 3.x

Cœur
  • 37,241
  • 25
  • 195
  • 267
Chanaka De Silva
  • 406
  • 1
  • 7
  • 21
  • it's best not to use jQuery with AngularJS, it's not part of the digest cycle. AngularJS can do DOM manipulations in directives that use JQLite. Simplest solution: switch jQuery Bootstrap to [`ui-bootstrap`](https://angular-ui.github.io/bootstrap/) – Aleksey Solovey Oct 19 '18 at 10:09

1 Answers1

0

Warning: it`s a very hacky solution but it should work pretty well.

As said in the comments it's hard to combine both logics.

Just use ng-click="isCollapsed = false" event on every navbar element:

<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
    <ul class="nav navbar-nav">
        <li class="submenu">
            <a href="#/" ng-click="isCollapsed = false" class="show-submenu">Home </a>
        </li>
        <li class="submenu">
            <a href="#/collection/brand/model/type/year" ng-click="isCollapsed = false" class="show-submenu">Our Collection </a>

        </li>
        <li class="submenu">
            <a href="#/about" ng-click="isCollapsed = false" class="show-submenu">About us </a>
        </li>
        <li class="submenu">
            <a href="#/contact" ng-click="isCollapsed = false" class="show-submenu">Contact us</a>
        </li>
    </ul>
</div>

If you have trouble with the combination of href and ng-click you can have a look here href overrides ng-click in Angular.js. Basically you can also move everything inside a function like collapseAndMove(href) and doing the routing and collapse stuff there.

Tommy
  • 2,355
  • 1
  • 19
  • 48