How to stick notification icon with menu toggle on small screens and right on large screens?

I'm trying to stick notification submenu to toggle menu in small screens and stick to right on small screens like the following

<!-- begin snippet: js hide: false --> <!-- language: lang-html -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed pull-left">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#about">Abount</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
  <ul class="nav">
    <li class="dropdown dropdown-list">
      <a href="javascript:;" data-toggle="dropdown" dropdown-animate="" aria-haspopup="true" class="dropdown-toggle">
        <i class="glyphicon glyphicon-bell"></i>
        <span class="label label-danger">11</span>
      </a>
    </li>
  </ul>
  </nav>

<!-- end snippet -->

But unfortunately it does not work. Please help me how could I do it?

To keep the notification always visible, you could add them to the nav-header like this:

<div class="navbar-header">
  <button class="navbar-toggle collapsed">...</button>

  <div class="nav navbar-brand pull-right">
      <a href="#" >
        <i class="glyphicon glyphicon-bell"></i>
        <span class="label label-danger">11</span>
      </a>
  </div>

</div>

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

.notifications.navbar-brand {
  font-size: 14px;
}

<!-- language: lang-html -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
  <div class="container">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" 
              data-target=".navbar-collapse" >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="nav navbar-brand pull-right notifications">
          <a href="#" >
            <i class="glyphicon glyphicon-bell"></i>
            <span class="label label-danger">11</span>
          </a>
      </div>

    </div>
    
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#about">Abount</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
  
  
  </nav>

<!-- end snippet -->