Showing notification window in mobile view - html

Question

in my app, i have a notification popup window that shows the latest messages, my example does not show opening, but that isnt the main of the conversation, the problem is that wwhen i resize the window, by button link with the bell notification on the right disapears, when it should be showing always, even in mobile.
The toggle menu appears has should it be, but in mobile view the bell link menu notifcation should appear at his side.
Whats wrong with my html code? Im using bootstrap
Ex:https://codepen.io/anon/pen/mmxQwO?editors=1010
Html:
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown ng-isolate-scope">
<a id="dLabel" role="button" class="icon-wrapper" data-toggle="dropdown" ng-click="notificationCtrl.updateDateTime()" data-target="#">
<i class="fa fa-bell-o"><span class="badge-notification ng-binding ng-hide" ng-show="notificationCtrl.nrNotifications > 0"> 0</span></i>
<div class="clearfix"></div>
</a>
<ul class="dropdown-menu notifications" role="menu" aria-labelledby="dLabel">
<li class="dropdown-header">
Notificações
</li>
<div class="notifications-wrapper">
<!-- ngRepeat: notification in notificationCtrl.notifications | limitTo: 5 --><a ng-repeat="notification in notificationCtrl.notifications | limitTo: 5 " class="content ng-scope" href="">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 notification-grid item-title notification-item">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 notification-grid">
<!-- USER -->
<strong class="ng-binding"></strong>
<!-- ngIf: notification.operation == 'first_register' -->
<!-- NOTIFICAÇÔES -->
<div>
<i class="fa fa-clock-o"><span class="item-info ng-binding"> há 2 meses atrás</span></i>
</div>
</div>
</div>
</a><!-- end ngRepeat: notification in notificationCtrl.notifications | limitTo: 5 --><a ng-repeat="notification in notificationCtrl.notifications | limitTo: 5 " class="content ng-scope" href="">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 notification-grid item-title notification-item">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 notification-grid">
<!-- USER -->
<i class="fa fa-clock-o"><span class="item-info ng-binding"> há 2 meses atrás</span></i>
</div>
</div>
</div>
</a>
</div>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>