0

I am trying this tutorial to implement Navbar in AngularJS

Navbar Code

<nav class="navbar navbar-default" 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>
    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
              </li>
          </ul>
          <ul class="nav navbar-nav navbar-right" ng-controller="LoginController">
              <li><a href="#/register">Register</a></li>
              <li><a href="#/">Login</a></li>
          </ul>
      </div>
    </div>
</nav>

Dependencies List

"dependencies": {
    "angular": "^1.6.2",
    "angular-route": "^1.6.2",
    "angular-cookies": "^1.6.2",
    "angular-translate": "^2.14.0",
    "angular-translate-loader-static-files": "^2.14.0",
    "angular-animate": "^1.6.2",
    "angular-touch": "^1.6.2",
    "angular-bootstrap": "^2.5.0",
    "bootstrap": "^3.3.7"
}

Problem is: It does not work on mobile device. It shows like I requested desktop view. I am truing to see Toggle Navbar

My webpage Url: http://pankajservers.in

Am I missing something?

Pankaj
  • 9,749
  • 32
  • 139
  • 283

2 Answers2

2

First of all, it would have been helpful to have a minimum working example. One needs to guess whether you've included angular, bootstrap and ui-bootstrap properly.

I tested it with the same angular, ui-bootstrap and bootstrap versions you mentioned in your dependencies.

If you uncomment some tags in a clever way, your code even works.

The div container that wraps your unsorted lists messes things up. When using Firebug, you are able to see that the hamburger menu is working, but your ui items are just not showing up.

<nav class="navbar navbar-default" 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>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <!-- comment out the div block, this messes things up -->
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
    <!-- I excluded the controller for testing purposes -->
    <!-- ng-controller="LoginController"> -->
          <li><a href="#/register">Register</a></li>
          <li><a href="#/">Login</a></li>
      </ul>
     <!-- exclude this here -->
     <!--</div>-->
</div>

MichaelHuelsen
  • 386
  • 1
  • 4
  • 11
  • This should correct it, works for me too. Can't believe I couldn't see that, but you've added the class="navbar navbar-collpase" twice. – Edward Smith Feb 16 '17 at 08:07
  • "not working on Anrdoid"... what browser are you using? Working or not strongly depends on the rendering engine of your device's browser. Try clearing the cache as well. – MichaelHuelsen Feb 16 '17 at 11:37
  • The website is not showing in the responsive mode, you are in desktop mode. – MichaelHuelsen Feb 16 '17 at 14:24
  • Seriously, this is a different issue, please look here http://stackoverflow.com/a/19158781/4537576 or https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag – MichaelHuelsen Feb 17 '17 at 05:38
0

Could it be you've got the wrong npm package for angular-ui-boostrap? My nav component is pretty much identical and works. The only difference is that in your package.json you've listed 'angular-bootstrap', where mine is

"dependencies": {
  "angular": "^1.6.1",
  "angular-animate": "^1.6.1",
  "angular-route": "^1.6.1",
  "angular-ui-bootstrap": "^2.4.0",
  "express": "^4.14.0",
  "greenlock-express": "^2.0.8",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2"
},

Note I'm using angular-ui-bootstrap instead of angular-bootstrap

Edward Smith
  • 542
  • 1
  • 5
  • 12