Angular 2 Отзывчивый заголовок - кнопка развернуть/переключиться не работает в мобильном режиме

Кнопка переключения отображается в мобильном режиме, но не доступна. В angular appDropdown используется для определения кнопки выпадающего списка. Есть ли аналогичный подход для фиксации кнопки переключения?

К сожалению, я не могу показать изображения здесь, но есть еще одна проблема с кнопкой "Администрирование". Он меняет цвет на серый, когда я навешиваю внутренний <li> (например, "Регистрация"...).

Добавление href= "#" устраняет нежелательное изменение цвета, но это обновляет всю страницу при ее нажатии.

Здесь HTML:

<nav class="navbar navbar-webmaster">
<div class="container">
    <div class="navbar-header">
        <button type="button" appDropdown class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" [routerLink]="['/']">Title</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Sublime<span class="sr-only"></span></a></li>
          <li class="dropdown" appDropdown *ngIf="userService.isAdmin">
      <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a [routerLink]="['/register']">Registration</a></li>
        <li><a>Other Admin  Stuff</a></li>
        <li role="separator" class="divider"></li>
        <li><a>Another Admin Stuff</a></li>
      </ul>
    </li>
        </ul>
        <form class="navbar-form navbar-right search-form" role="search">
            <input type="text" class="form-control" placeholder="Search" />
        </form>
    </div>

</div>

CSS:

nav.navbar-webmaster {
  background: #00547E;
}

nav.navbar-webmaster a {
  color: #fff;
}

nav.navbar-brand :hover {
  color: #337ab7;
}

nav.navbar-webmaster ul.navbar-nav a:hover,
nav.navbar-webmaster ul.navbar-nav a:visited,
nav.navbar-webmaster ul.navbar-nav a:focus,
nav.navbar-webmaster ul.navbar-nav a:active {
  background: #0d3a51;
}

nav.navbar-webmaster ul.navbar-nav a:hover {
  border-color: #337ab7;
}

nav.navbar-webmaster li.divider {
  background: #ccc;
}

nav.navbar-webmaster button.navbar-toggle {
  background: #999;
  border-radius: 2px;
}

nav.navbar-webmaster button.navbar-toggle:hover {
  background: #999;
}

nav.navbar-webmaster button.navbar-toggle>span.icon-bar {
  background: #fff;
}

nav.navbar-webmaster ul.dropdown-menu {
  border: 0;
  background: #fff;
}

nav.navbar-webmaster ul.dropdown-menu>li>a {
  color: #444;
}

nav.navbar-webmaster ul.dropdown-menu>li>a:hover {
  background: #00547E;
  color: #fff;
}

Любая помощь очень ценится.

Ответ 1